Accordion

Accordions help users see only the content they need. Accordions expand and collapse sections of content.

Accordions should be used sparingly! Content should only be hidden for well considered reasons.

Accordions are good for:

  • Selective content: i.e. there may be many sections under a given topic but only a few sections apply to a given individual at a time.
  • Complex process overviews: with the detail of each step hidden. See the Example 2 below.

Accessibilty

Accordion has been built in accordance with https://www.w3.org/TR/wai-aria-practices-1.1/#accordion

The heading level for each accordion heading should fit correctly within the outline of the page. Headings within the content of each accordion should follow from there.

Patterns

Note: Accordions have a special class for ds-block container ds-block-accordion. This is to cater for Squiz Matrix implementation limitations. Each accordion is wrapped in its own ds-block ds-block-accordion container and stacked on top of each other - this allows a content template to made for a single accordion and stacking containers for mutiple accodions.

For non-matrix implementations where it is more praticle to add, remove and reorder accordions in a group you may forgo the ds-block-accordion class on the ds-block container and have only one ds-block

Accordion - example 1

ready

This exmple uses the stacked ds-block-accordion structure (used in Squiz Matrix Accordion Content Template).

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect4trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect4">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect4" class="ds-accordion__content" role="region" aria-labelledby="sect4trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect5trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect5">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect5" class="ds-accordion__content" role="region" aria-labelledby="sect5trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

Accordion - example 2

ready

This example uses the one ds-block container structure.

<div class="ds-block">
    
    <div class="ds-accordion">
        <h2>
            <button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
                <span class="ds-accordion__title">
                    1: Download and install the VPN client
                </span>
            </button>
        </h2>
        <div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
            <h3>Windows</h3>
            <ol>
                <li>Click <strong>Start</strong> and expand the <strong>Cisco</strong> folder in the applications list.</li>
                <li>Click <strong>Cisco AnyConnect Secure Mobility Client</strong>.</li>
                <li>Enter <strong>ltuvpn.latrobe.edu.au</strong> in the <strong>Ready to connect</strong> field and click <strong>Connect</strong>.</li>
                <li>Enter your La Trobe username 
                    <ul>
                        <li><strong>Staff</strong> should enter their username as <strong>JBloggs</strong></li>
                        <li><strong>Students</strong> should enter their username as <strong>STUDENTS\01234567</strong></li>
                    </ul>
                </li>
                <li>Enter your La Trobe account password and click <strong>OK</strong>.</li>
                <li>Click <strong>Accept</strong>.</li>
            </ol>
            <h3>Mac OS</h3>
            <ol>
                <li>In Finder, click <strong>Go</strong> and select <strong>Applications</strong>.</li>
                <li>Double-click the <strong>Cisco</strong> folder.</li>
                <li>Double-click <strong>Cisco AnyConnect Secure Mobility Client</strong>.</li>
                <li>Enter <strong>ltuvpn.latrobe.edu.au</strong> in the <strong>Ready to connect</strong> field and click <strong>Connect</strong>.</li>
                <li>Enter your La Trobe username:
                    <ul>
                        <li><strong>Staff</strong> should enter their username as <strong>JBloggs</strong></li>
                        <li><strong>Students</strong> should enter their username as <strong>STUDENTS\01234567</strong></li>
                    </ul>
                </li>
                <li>Enter your La Trobe account password and click <strong>OK</strong>.</li>
                <li>Click <strong>Accept</strong>.</li>
            </ol>
            <p>For mobile devices, see our guides for <a title="AnyConnect for Android" href="https://www.latrobe.edu.au/students/support/it/connecting/vpn/Install-and-run-the-VPN/android">Android</a> and <a title="AnyConnect for iOS" href="https://www.latrobe.edu.au/students/support/it/connecting/vpn/Install-and-run-the-VPN/ios">iOS(iPhone or iPad)</a>.</p>
        </div>
    </div>

    <div class="ds-accordion">
        <h2>
            <button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
                <span class="ds-accordion__title">
                    2: Run the VPN client
                </span>
            </button>
        </h2>
        <div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
            <h3>Windows</h3>
            <ol>
                <li>Click <strong>Start</strong> and expand the <strong>Cisco</strong> folder in the applications list.</li>
                <li>Click <strong>Cisco AnyConnect Secure Mobility Client</strong>.</li>
                <li>Enter <strong>ltuvpn.latrobe.edu.au</strong> in the <strong>Ready to connect</strong> field and click <strong>Connect</strong>.</li>
                <li>Enter your La Trobe username
                    <ul>
                        <li><strong>Staff</strong> should enter their username as <strong>JBloggs</strong></li>
                        <li><strong>Students</strong> should enter their username as <strong>STUDENTS\01234567</strong></li>
                    </ul>
                </li>
                <li>Enter your La Trobe account password and click <strong>OK</strong>.</li>
                <li>Click <strong>Accept</strong>.</li>
            </ol>
            <h3>Mac OS</h3>
            <ol>
                <li>In Finder, click <strong>Go</strong> and select <strong>Applications</strong>.</li>
                <li>Double-click the <strong>Cisco</strong> folder.</li>
                <li>Double-click <strong>Cisco AnyConnect Secure Mobility Client</strong>.</li>
                <li>Enter <strong>ltuvpn.latrobe.edu.au</strong> in the <strong>Ready to connect</strong> field and click <strong>Connect</strong>.</li>
                <li>Enter your La Trobe username:
                    <ul>
                        <li><strong>Staff</strong> should enter their username as <strong>JBloggs</strong></li>
                        <li><strong>Students</strong> should enter their username as <strong>STUDENTS\01234567</strong></li>
                    </ul>
                </li>
                <li>Enter your La Trobe account password and click <strong>OK</strong>.</li>
                <li>Click <strong>Accept</strong>.</li>
            </ol>
            <p>For mobile devices, see our guides for <a title="AnyConnect for Android" href="https://www.latrobe.edu.au/students/support/it/connecting/vpn/Install-and-run-the-VPN/android">Android</a> and <a title="AnyConnect for iOS" href="https://www.latrobe.edu.au/students/support/it/connecting/vpn/Install-and-run-the-VPN/ios">iOS(iPhone or iPad)</a>.</p>
        </div>
    </div>

</div>

Accordion - example 3

ready

This exmple demostrates ability of having accordion opened by setting aria-expanded="true" in HTML.

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion">
        <h3>
            <button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="true" aria-controls="sect2">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

Accordion - example 4

ready

This exmple demostrates abilities of setting up custom components:

  • Using presentation (component HTML) from design system but not applying JavaScript handlers. Adding ds-no-js CSS class to accordion element (with ds-accordion CSS class) to avoid JS handlers being applied.
  • Setup component manually 

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion ds-no-js">
        <h3>
            <button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<div class="ds-block ds-block-accordion">

    <div class="ds-accordion ds-no-js">
        <h3>
            <button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
                <span class="ds-accordion__title">
                    Item
                </span>
            </button>
        </h3>
        <div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

<script>
jQuery(document).ready(function($) {
    LTUDS.ready(() => {
        const selector = '.ds-accordion__trigger'

        $(selector).click(() => {
            alert('This is custom click handler!');
        })

        const component = LTUDS.components.accordion

        component.helpers.openAccordionOnLoad(selector)
        $(selector).on('click', component.eventHandlers.triggerOnClick)

    })
})
</script>