Accordions2024-06-18T00:58:44+00:00

Accordions (‘Toggles’ in Avada)

On this page

    Overview

    Accordions expand and collapse sections of content.

    How to use

    • Use an Avada Toggle element (default)
    • No additional classes are required as this is a global element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl ac sem malesuada tincidunt. Vestibulum eu purus dui. Vivamus at tempor enim. Cras in enim ex. Nunc tincidunt efficitur tristique. Nam placerat nisl eu efficitur lobortis. Pellentesque eget rutrum metus. Proin et tortor vel ex consectetur semper nec sit amet ex. Maecenas ornare condimentum justo, a convallis nunc ultricies quis. Phasellus at quam sit amet sem porta aliquet a non elit. Maecenas neque eros, finibus et odio commodo, elementum ultricies nulla. Aenean sed elementum sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl ac sem malesuada tincidunt. Vestibulum eu purus dui. Vivamus at tempor enim. Cras in enim ex. Nunc tincidunt efficitur tristique. Nam placerat nisl eu efficitur lobortis. Pellentesque eget rutrum metus. Proin et tortor vel ex consectetur semper nec sit amet ex. Maecenas ornare condimentum justo, a convallis nunc ultricies quis. Phasellus at quam sit amet sem porta aliquet a non elit. Maecenas neque eros, finibus et odio commodo, elementum ultricies nulla. Aenean sed elementum sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl ac sem malesuada tincidunt. Vestibulum eu purus dui. Vivamus at tempor enim. Cras in enim ex. Nunc tincidunt efficitur tristique. Nam placerat nisl eu efficitur lobortis. Pellentesque eget rutrum metus. Proin et tortor vel ex consectetur semper nec sit amet ex. Maecenas ornare condimentum justo, a convallis nunc ultricies quis. Phasellus at quam sit amet sem porta aliquet a non elit. Maecenas neque eros, finibus et odio commodo, elementum ultricies nulla. Aenean sed elementum sem.

    Usage guidelines for accordions

     When to use it

    Accordions are to be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions aren’t a suitable replacement for well formatted plain text. If a user needs all, or most of the information on the page it should be visible, not hidden inside an accordion.

    Before using an accordion, consider whether the benefits outweigh the negative usability impacts.

    • Hiding content makes it harder for a user to scan a webpage. If your content is hidden inside an accordion, it can be difficult for a user to scan the whole page for content relevant to them. Web browsers’ ‘Find on page…’ search functions don’t detect content hidden by accordions, making it harder for users to locate text.
    • Accordions increase cognitive load. Forcing a user to click on each accordion to get the full text fragments their user experience, causing them to switch focus between accordions to get to the information. It’s also possible with hidden content, that a user might not see important information.

    Accordions can be suitable when users need only a few key pieces of content on a single page. By hiding unimportant content within an accordion, users can efficiently focus on the few topics that matter.

    When not to use it

    • If the amount of content it would need to contain will make the page slow to load
    • To split up a series of questions into sections, use separate pages instead
    • With very short content, use lists or paragraphs
    • With very long content, use tabs or separate pages
    • With any other UI elements within the header
    • For important information which if hidden could be missed
    • Just to shorten a page

    Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.

    Back to top