<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 -->