Accordions

Accordions are useful when there's a lot of information to show on a page, but you want to keep the layout clean and not overwhelm the user with a lot of information. Users have the ability to choose to see what's important to them. It was recently used in a project where we consolidated multiple standalone marketing websites into a single site (catalog) and no longer could have multiple pages per product. Accordions allowed us to have several pages of information on one page.

I've also used variations of these accordions on FAQ and other pages where there are many repeatable instances of information that users can select what's important to them.

​How it works

  1. The script changes the height of the next sibling element when a DIV with class of "collapsible-header" is clicked on.
  2. The next sibling element is a DIV with the classes of "collapsible-content" and "collapsible-closed."
  3. The script toggles "collapsible-closed" off/on and that class has a height of "0" making that DIV visible or not.
  4. This is the simplest way I've seen accordions done.

Sample

FAQs
What is the answer to my question?
This is the answer.
What if I have another question?
The answers keep coming.
More Details

More information is contained here.

Code

The code below is the magic that makes the above sample happen.

<div class="collapsible-header accordion" aria-label="click for FAQs"> FAQs </div> <div class="collapsible-content collapsible-closed"> <div class="collapsible-header faq" aria-label="click on the question"> What is the answer to my question? </div> <div class="collapsible-content collapsible-closed"> This is the answer. </div> <div class="collapsible-header faq" aria-label="click on the question"> What if I have another question? </div> <div class="collapsible-content collapsible-closed"> The answers keep coming. </div> </div> <div class="collapsible-header accordion" aria-label="click for details"> More Details </div> <div class="collapsible-content collapsible-closed"> <p>More information is contained here.</p> </div> <style type="text/css"> .collapsible-header { cursor: pointer; margin-bottom: 1.375rem; } .collapsible-content { margin-bottom: 1.375rem; } .collapsible-closed { height: 0; overflow: hidden; margin-bottom: 0; } .accordion { width: 100%; border-bottom: 1px solid #AAAAAA; outline: none; font-size: 1.4rem; font-weight:bold; color: #0057b8; padding: 0.5rem 0; } .accordion:after { content: '\f0d7'; font-family: 'FontAwesome' ; float: right; margin-left: 5px; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .accordion-open:after { transform: rotate(-180deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .faq { display: table; border-bottom: 1px solid #9F2214; } .faq:hover { color: #9F2214; border-bottom: 1px solid #000000; } </style> <script> var acc = document.getElementsByClassName("collapsible-header"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("accordion-open"); var panel = this.nextElementSibling; panel.classList.toggle("collapsible-closed"); }); } </script>

UX/UI advantages of accordions

  1. the user can select what information pertains to them.
  2. lots of information can be easily accessed without overwhelming the user.
  3. virtually an unlimited number of them can be used on a page.
  4. doesn't require the user to scroll back up to see the contents of the next accordion.
  5. accordions can be easily styled for different applications.
  6. it is also easy to nest accordions inside each other.

UX/UI alternatives to accordions

  1. Plain text
    1. easily becomes overwhelming to the user if there's a lot of text.
  2. Tabs
    1. UI takes less vertical space.
    2. can become problematic very quickly on mobile
      1. when there is a lot of text in a tab.
      2. when there are more than a few tabs.
    3. requires the user to scroll back up when finished with a tab.

UX/UI debt

  1. I prefer to have the micro-interaction of a transition, which works fine when accordions aren't nested, but when they are nested, the calculated height of the DIV doesn't work as the contained accordion will expand in size larger than the height of the containing DIV was calculated.