Accordion

Accordions are helpful for pages where a person needs to scan a number of (more than 8) headings and choosing a single item to get information. If there is a need to directly link to this one item or for someone to print a single item, an accordion is not helpful. Accordions may shorten pages and reduce scrolling, but they increase the time and effort spent by requiring people to select various topic headings in order to locate the information they need.

Accordions should be treated as a last resort, if and only if the content meets ALL of the following criteria.

  1. The list has more than five to eight items on it.
  2. The user would be scanning the list for one, at max two, items.
  3. Opening the accordion reveals the content of 1-2 paragraphs, no more.
  4. The content in the accordions does not need to be linked to (no deep-linking).

If there are more than five to eight headings, consider using a table of contents that anchors/links to each heading.

Having all the content on the screen provides a better user experience, allowing users to:

  • reference multiple pieces of information at once
  • utilize the CTRL+F find on the page
  • scan headings
  • determine if they are on the right page without having to take any action (click).
  • Component configuration
    Page field Data
    modular-accordion-1
    {
    "id":000000,
    "heading":"Accordion"
    }
    
  • Promotion group details
    Available fields
    Title Text on the closed accordion.
    Description Content when the accordion is clicked open.

My accordion

My second accordion