Skip links and keyboard navigation

SWE components

Accordion

Overview

Accordions display collapsible content panels for presenting information in a limited amount of space. Accordions help users see only the content they need, while everything else is easily accessible.

Default

  • Apply the dark theme by adding the qg-dark-accordion class.
  • Apply the light theme by adding the qg-light-accordion class.

View example in Storybook

Code

<section class="qg-accordion qg-dark-accordion qg-accordion-v2" aria-label="Default accordion (dark style)">
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-1-170517">
            <p>Accordion content</p>
        </div>
    </article>
    
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title" data-analytics-link-group="accordion-interaction">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-2-170517">
            <p>Accordion content</p>
        </div>
    </article>
</section>

With a subtitle

View example in Storybook

Code

<section class="qg-accordion qg-dark-accordion qg-accordion-v2" aria-label="Accordion with Subtitle (dark style)">
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title">Accordion title</span>
                    <span class="subtitle">Accordion subtitle</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-1-170549">
            <p>Accordion content</p>
        </div>
    </article>
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title" data-analytics-link-group="accordion-interaction">Accordion title</span>
                    <span class="subtitle">Accordion subtitle</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-2-170549">
            <p>Accordion content</p>
        </div>
    </article>
</section>

With an icon

View example in Storybook

Code

<section class="qg-accordion qg-dark-accordion qg-accordion-v2" aria-label="Accordion with Icon (dark style)">
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <img src="https://www.qld.gov.au/jobs/_resources/assets-looking-for-work/step-1-icon.png">
                <span class="accordion-label">
                    <span class="title">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-1-170553">
            <p>Accordion content</p>
        </div>
    </article>
    <article>
        <button class="acc-heading qg-accordion--closed">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <img src="https://www.qld.gov.au/jobs/_resources/assets-looking-for-work/step-2-icon.png">
                <span class="accordion-label">
                    <span class="title" data-analytics-link-group="accordion-interaction">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-2-170553">
            <p>Accordion content</p>
        </div>
    </article>
</section>

With expand/collapse all

View example in Storybook

Code

<section class="qg-accordion qg-light-accordion qg-accordion-v2" aria-label="Light style accordion">
    <div class="qg-acc-controls">
        <button class="controls expand">Expand all</button>
            <span class="controls">|</span>
        <button class="controls collapse">Collapse all</button>
    </div>
    <article>
        <button class="acc-heading qg-accordion--closed" aria-expanded="true">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-1-173184">
            <p>Accordion content</p>
        </div>
    </article>
    <article>
        <button class="acc-heading qg-accordion--closed" aria-expanded="false">
            <a class="qg-accordion--ga" data-analytics-link-group="accordion title - Accordion title">
                <span class="accordion-label">
                    <span class="title" data-analytics-link-group="accordion-interaction">Accordion title</span>
                </span>
            </a>
        </button>
        <div class="collapsing-section" id="id-panel-2-173184">
            <p>Accordion content</p>
        </div>
    </article>
</section>

Additional usage guidance

  • Try to limit the number of panels in an accordion by categorising information into smaller, digestible chunks. This will assist your users in scanning and comprehending the content.
  • Remember to structure textual content correctly in accordions, for example, use heading tags where appropriate.
Last updated:
28 June 2024