Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

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