An accordion is a series of expandable vertical panels, used to condense space by hiding content and revealing it as required.
By default, the panels are collapsed on page load.
<div class="nsw-container"> <div class="nsw-accordion js-accordion"> <h2 class="nsw-accordion__title">Accordion title 1</h2> <div class="nsw-accordion__content"> <div class="nsw-wysiwyg-content"> <p>Accordion content 1</p> </div> </div> <h2 class="nsw-accordion__title">Accordion title 2</h2> <div class="nsw-accordion__content"> <div class="nsw-wysiwyg-content"> <p>Accordion content 2</p> </div> </div> </div> </div> <script src="/js/main.js"></script> <script>window.NSW.initSite();</script>
Accordions comprise of a title and content. On click of the title, the contents are hidden or revealed.
They are designed to save space on a page, only revealing content as needed by the user.
Accordions allow users to ignore what is not of interest to them and only expand what they want.
Intuitive headings help the user build a clear mental model of the content.
A directional arrow indicates that the panel is expandable or collapsible. This is further suggested by a hover state which lets the user know the entire title bar is clickable.
Use to save space on long pages.
Use to simplify overwhelming content, by allowing users to expand only what they need.
Use to progressively step users through complex flows.
Accordions can be set open or closed by default.
They can be configured to only allow 1 panel to be open at a time.
Ensure the headings used are brief and explicit about what is contained in the hidden panel.
Don't use where users need to read all of the content of a page.
Don't use with only 1 panel allowed to be open at once, if people need to compare items in different panels. Consider tabs if the user would likely need to flick between content sections.
Do not disable content. If content is not available, don't show the heading.
Don't use with very short content, use lists or paragraphs.
Don't use with very long content, use tabs or separate pages.
Don't add any other UI elements within the header.
Don't use where important information can be hidden and missed.