14 examples of accordions that will blow your mind

Emanuele Ricci

Posted by Emanuele Ricci on 11 Aug 2016 reading time

  • Accordions provide a perfect way of making content heavy pages appear less so.

    Made up of multiple items containing a head/title and body with expanded content, the accordion gives a chance for brands to get creative with design and animation.

    Let’s take a look at some power examples of accordions used by some leading brands for inspiration and review.

  • 1. All Clad
    1. All Clad

    We’re impressed with the accordion within an accordion (accordion-ception anyone) provided by the team at All Clad. With clear highlighting for the active parent accordion titles, it’s very easy to follow where you are and the current selected item. Great job guys!

    View in action

  • 2. DeLonghi
    2. DeLonghi

    The DeLonghi FAQ page uses accordions to separate questions and answers. Whilst the design is quite simple, it does fit the look and feel the page. What would be nice to see is snippets of answers instead of just links to find out more which makes the purpose of the accordion redundant.

    View in action

  • 3. Parafix
    3. Parafix

    Here is another great example of accordion integration, with clear highlighting and the icon changes to show the active accordion element. On brand and consistent with the page design, it really is a winning element.

    View in action

  • 4. Samsung
    4. Samsung

    Samsung’s accordions work well as they offer both icons and subtitles to help direct users as to the type of content they’ll be viewing. The look of the accordion pane is also creative and fits in well with the overall design.

    View in action

  • 5. Dow Chemicals
    5. Dow Chemicals

    Dow’s accordion styles is bordered, showing clearly defined regions for each section of content. There isn’t a separator between each title and pane, but we think this adds to the overall aesthetic!

    View in action

  • 6. GE
    6. GE

    GE’s careers pages have a very interesting use of accordions to display full job details for each position available. The head is constant with the position and location, so you can easily follow each block of data.

    View in action

  • 7. Ferrari
    7. Ferrari

    We love the Ferrari accordion design as each title supports multiple lines of text. With a clearer highlighting for the active item this would really be an accordion to be reckoned with!

    View in action

  • 8. Tesco
    8. Tesco

    Tesco present another example of accordion-ception – and we aren’t disappointed! We’re not sure if the + and – icon sizes are as large as they are by design, but a small drop in size and shift in position would be fantastic.

    View in action

  • 9. Beats by Dre
    9. Beats by Dre

    For one of the world’s most stylish audio equipment manufacturers, we aren’t surprised about the quality of the accordion design. Using an image alongside each title really helps to showcase the quality of the products, plus the active accordion has a horizontal line under it to separate it from other content.

    View in action

  • 10. Mint
    10. Mint

    You won’t find many examples of minimal accordion design as good as this. Granted, there aren’t any icons for active and passive accordion items, but we don’t feel it’s needed either.

    View in action

  • 11. Philips
    11. Philips

    Philips have a rather safe, but clean design for their accordions, which will fit the needs of many a corporate site. There is no animation used when changing between slides, which we think is a major shame.

    View in action

  • 12. Kimberly Clark
    12. Kimberly Clark

    Kimberly Clark’s FAQ page has a very conventional, but effective accordion design and usage. Icons open/close are placed on the left, which is different but does help to align content. We also love the fact that you can have multiple panes open at any given time.

    View in action

  • 13. Heineken
    13. Heineken

    Heineken have hit the nail on the head with their accordion design, which is transparent and blends in perfectly with the background of the web page. Spacious and easy on the eyes, we can certainly get behind this one!

    View in action

  • 14. Costa
    14. Costa

    We’ll close with the coffee maestro, Costa. Not only is their accordion design consistent with their brand, but the active pane is kick ass giving the impression of a speech bubble when selected – awesome.

    View in action

  • What’s your thought with our list? Do you have any examples of accordions that you think stand out amongst the crowd?

    We’d love to hear your feedback, so why not take part in the conversation using the comments section below!

Like what you've read
Why not join our blog? You'll be kept in the loop with Debunc news + updates as they happen!
  • This field is for validation purposes and should be left unchanged.
Got your PAWS on marketing success?

Get our power guide to help get more traffic, convert more leads and win more business!

Get the eBook
Posted by Emanuele Ricci
Emanuele Ricci

Emanuele is a designer at Debunc. A graduate of Graphic Design at the Academy of Fine Arts Santa Giulia, his skills span both digital and traditional media. Emanuele is also an avid illustrator and in his spare time works on personal artistic projects.

View all news
View all articles
Got your PAWS on marketing success?

Get our power guide to help get more traffic, convert more leads and win more business!

Get the eBook
Pointing finger

Handpicked content, just for you

  • Can you DIY design?
    Can you DIY design?

    Many companies and start-ups reach a hurdle when it comes to design, as cost and creativity become limiting factors. There are ways of reducing marketing expenses by doing some of the design work in-house. Careful planning and preparation…

  • The benefits of image-free HTML design
    The benefits of image-free HTML design

    Many designers and developers struggle with creating HTML email designs that are functional yet aesthetically pleasing; especially when images have been disabled by an email client or web browser. Making sure your email design...

  • How to wow your customers with stunning visuals + imagery
    How to wow your customers with stunning visuals + imagery

    First impressions count. Does your web imagery wow customers and encourage engagement?

  • Top 8 property maintenance websites
    Top 8 property maintenance websites

    Having recently launched a web project in the property maintenance space, we thought why not take a look at some of our client's competitors and highlight what we like about their sites.