Accordions

Examples

Accordions allow users to show or hide related content on a page. They are a list of containers which reveal more detailed content in a controlled and progressive manager when a user taps or clicks the accordion heading.

Usage

Use accordions to organise and minimise content. They can help in managing and navigating through large sets of information or options efficiently. They allow the user to decide what they want to read, reducing clutter and cognitive load.

Do:

use it to organise non-essential content
use on frequently asked question style pages
ensure that when one accordion is clicked it is expanded, while other accordions are collapsed, meaning only one accordion should be open at a time
provide a printer friendly version of your content to ensure nothing is hidden when printing
consider using when space is limited, such as on mobile devices, to minimise excessive scrolling by providing a clear page structure
consider the value of the content and if it really should be hidden in an accordion
use the accordion as supplied, but contact the UX Team if you require a bespoke solution

Avoid:

using accordions within a table
hiding essential content within accordions as this can be missed by users
opening accordions on hover
placing accordions within accordions
using accordions to simply shorten page length
when a user needs to be able to compare information, instead display all the content at once

References

Nielsen Norman Group
Accordions Are Not Always the Answer for Complex Content on Desktops

Web Design Ledger
Best Practices For Accordion Menu In Web Design

Smashing Magazine
Designing Perfect Accordion Checklists

Medium
Little details in UX design: Tabs vs. Accordions

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


    <turas-accordion accordion-id="accOne">
        <turas-accordion-item accordion-item-id="accOneitem1" accordion-item-title="Accordion item title one">
            <turas-lorem />
        </turas-accordion-item>

        <turas-accordion-item accordion-item-id="accOneitem2" accordion-item-title="Accordion item title two">
            <turas-lorem />
        </turas-accordion-item>
    </turas-accordion>

Copy


    <div id="accOne" class="accordion ">
<div id="accOneitem1" class="card ">
    <div id="headingaccOneitem1" class="card-header">
        <div class="mb-0">
            <button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapseaccOneitem1" aria-controls="collapseaccOneitem1" aria-expanded="false">
                Accordion item title one
            </button>
        </div>
    </div>
    <div id="collapseaccOneitem1" class="collapse " aria-labelledby="headingaccOneitem1">
        <div class="card-body">
            
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
        </div>
    </div>
</div>

<div id="accOneitem2" class="card ">
    <div id="headingaccOneitem2" class="card-header">
        <div class="mb-0">
            <button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapseaccOneitem2" aria-controls="collapseaccOneitem2" aria-expanded="false">
                Accordion item title two
            </button>
        </div>
    </div>
    <div id="collapseaccOneitem2" class="collapse " aria-labelledby="headingaccOneitem2">
        <div class="card-body">
            
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
        </div>
    </div>
</div>
</div>

Required parameters

accordion-id - the unique ID of the accordion (use this instead of the HTML ID attribute)
accordion-item-id - the unique ID of each accordion item
accordion-item-title - the accordion item title

Optional parameters

accordion-item-expanded - set to 'true' on the accordion item to have the item expanded on page load
additional-classes - additional CSS classes

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the accordion is in an expected tab order and doesn't cause a keyboard trap
accordion should open and close when pressing return and space keys
make sure focus is visible
test accordion with screen readers to make sure all states such as closed and expanded are read out

Developer considerations

accordions must tell users their current states so make sure ARIA expanded = "false" is used for closed states and expanded = "true" is used for open states
when using an accordion group make sure when you open a new one it doesn't close the previously closed one
accordions at different parts of a page for example, one at the top and one at the bottom should act independent of each other

Overview

Alert boxes

Examples

Usage

References

Required parameters

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?