Accordion

Accordion example

Show/hide markup
<dl class="accordion" id="accordion-group" data-accordion role="presentation">

    <!-- The item requires: an apppropriate heading level via aria-level -->
    <dt class="accordion-item" role="heading" aria-level="4">
        <!-- The title requires: unique ID and aria-controls. -->
        <button class="accordion-title" id="sect1-heading" aria-controls="sect1" type="button">
            <span class="accordion-label">Accordion Panel One</span>
            <span class="accordion-icon" aria-hidden="true"></span>
        </button>
    </dt>
    <!-- The content pane requires: role="region", data-tab-content, and aria-labelledby. -->
    <dd id="sect1" class="accordion-content" role="region" data-tab-content aria-labelledby="sect1-heading">
        <p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, <a href="#">dapibus nec congue nec</a>, luctus non est.</p>
        <a href="#" class="button">Button</a>
    </dd>

    <dt class="accordion-item" role="heading" aria-level="4">
        <button class="accordion-title" id="sect2-heading" aria-controls="sect2" type="button">
            <span class="accordion-label">Accordion Panel Two</span>
            <span class="accordion-icon" aria-hidden="true"></span>
        </button>
    </dt>
    <dd id="sect2" class="accordion-content" role="region" data-tab-content aria-labelledby="sect2-heading">
        <p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nemo.</li>
            <li>Accusamus ipsam excepturi placeat ipsum sunt fugiat aliquam, vitae nemo.</li>
            <li>Earum iste illum, repellendus aperiam nobis ipsam quaerat pariatur! Assumenda.</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit accusamus tempore nesciunt id iusto labore voluptatem totam ipsum eum repellendus.</p>
    </dd>

    <dt class="accordion-item" role="heading" aria-level="4">
        <button class="accordion-title" id="sect3-heading" aria-controls="sect3" type="button">
            <span class="accordion-label">Accordion Panel Three</span>
            <span class="accordion-icon" aria-hidden="true"></span>
        </button>
    </dt>
    <dd id="sect3" class="accordion-content" role="region" data-tab-content aria-labelledby="sect3-heading">
        <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
    </dd>
</dl><!-- /.accordion -->

Apply IU style to any site

You can use our style and code snippets to improve any website in any content management system. Or you can request a copy of the Web Framework, a self-service tool that lets developers build a site in the WCMS.

If you would like to learn more about how we can help you build your website in the Web Framework, contact Eleanor Berman at IU Communications.