Accordion

Accordion example

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, dapibus nec congue nec, luctus non est.

Button Inverted Button

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Ordered list item 1
  • Ordered list item 2
  • Ordered list item 3
Definition list (dt)
Definition list (dd)
Definition list (dt)
Definition list (dd)

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.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nemo.
  • Accusamus ipsam excepturi placeat ipsum sunt fugiat aliquam, vitae nemo.
  • Earum iste illum, repellendus aperiam nobis ipsam quaerat pariatur! Assumenda.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit accusamus tempore nesciunt id iusto labore voluptatem totam ipsum eum repellendus.

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.

Show/hide markup
<div class="accordion" id="accordion-group" data-accordion>

    <!-- The item requires: an apppropriate heading level via aria-level -->
    <div class="accordion-item">
        <h4>
            <button class="accordion-title" id="sect1-heading" aria-controls="sect1">
                <span class="accordion-label">Accordion Panel One</span>
                <span class="accordion-icon" aria-hidden="true"></span>
            </button>
        </h4>
        <!-- The title requires: unique ID and aria-controls. -->
    </div>
    <!-- The content pane requires: role="region", data-tab-content, and aria-labelledby. -->
    <div 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>
        <a href="#" class="button invert">Inverted Button</a>

        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <ul>
            <li>Unordered list item 1</li>
            <li>Unordered list item 2</li>
            <li>Unordered list item 3</li>
        </ul>

        <ul>
            <li>Ordered list item 1</li>
            <li>Ordered list item 2</li>
            <li>Ordered list item 3</li>
        </ul>

        <dl>
            <dt>Definition list (dt)</dt>
            <dd>Definition list (dd)</dd>
            <dt>Definition list (dt)</dt>
            <dd>Definition list (dd)</dd>
        </dl>
    </div>

    <div class="accordion-item">
        <h4>
            <button class="accordion-title" id="sect2-heading" aria-controls="sect2">
                <span class="accordion-label">Accordion Panel Two</span>
                <span class="accordion-icon" aria-hidden="true"></span>
            </button>
        </h4>
    </div>
    <div 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>
    </div>

    <div class="accordion-item">
        <h4>
            <button class="accordion-title" id="sect3-heading" aria-controls="sect3">
                <span class="accordion-label">Accordion Panel Three</span>
                <span class="accordion-icon" aria-hidden="true"></span>
            </button>
        </h4>
    </div>
    <div 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>
    </div>
</div><!-- /.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.