Accordion

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.

Usage considerations

  • Try to limit the number of panels in an accordion by categorising information into smaller, digestible chucks. 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.
|
|

Content related to header.

  • If dot points are available
  • Can go here

Form example inside accordion


HTML 


          <section class="qg-accordion qg-accordion-v2" aria-label="Accordion Label">
            <div class="qg-acc-controls">
              <button class="controls expand">Expand all</button>
              <span class="controls">&#124;</span>
              <button class="controls collapse">Collapse all</button>
            </div>
            <article>
              <button class="acc-heading qg-accordion--closed" aria-controls="accordion-default" aria-expanded="true" ><span class="accordion-label"><span class="title">Without icon</span></span></button>
              <div class="collapsing-section">
                <p> Content related to header. </p>
                <ul>
                  <li>If dot points are available</li>
                  <li>Can go here</li>
                </ul>
                <p>Form example inside accordion</p>
              </div>
            </article>
            <article>
              <button class="acc-heading qg-accordion--closed" aria-controls="accordion-default" aria-expanded="true" ><img src="https://placeimg.com/20/20/nature" alt=""><span class="accordion-label"><span class="title">With icon</span> <span class="subtitle">Subtitle can go here (optional)</span></span></button>
              <div class="collapsing-section ">
                <h4>Heading</h4>
                <p> Content related to header. </p>
                <ul>
                  <li>If dot points are available</li>
                  <li>Can go here</li>
                </ul>
                <p>Or provide any semantic html structure</p>
                <button type="button" class="qg-btn btn-default">Default</button>
                <button type="button" class="qg-btn btn-primary">Primary</button>
                <button type="button" class="qg-btn btn-secondary">Primary Alt</button>
                <button type="button" class="qg-btn btn-link">Link</button>
              </div>
            </article>
          </section>
Class Usage
qg-dark-accordion Dark theme
qg-accordion-v2 Accordion enhancements (accessibility and design). For backward compatibility accordions already in use without this new class will work as expected

Use 'title of an accordion' or an 'ID of an accordion' to open a panel

  • We can use a 'title of an accordion'. For example , https://qld-gov-au.github.io/web-template-release/components/accordion.html#With-icon
  • Similarly we can use an ID to open a panel For example , https://qld-gov-au.github.io/web-template-release/components/accordion.html##id-panel-3

Fontawesome icon can also be used instead of image.

Accordion without icons or images is advised best practice. 


                <i class="fa fa-car" aria-hidden="true"></i>
                or
                <img src="{{path of the image}}" alt="">