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.
qg-dark-accordion
class.qg-light-accordion
class.<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>
<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>
<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>
<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>