Cornerstone

Accordion: Checklist

Create a show/hide accordion-style element

The accordion is set to automatically open the first accordion in the accordion container.

For omniCMS, to have a closed accordion by default, make sure you add the class _collapsed to the accordion table.

For development, to have a closed accordion by default, make sure you add data-open="false" in the accordion header.

<div class="tcu-accordion-container _checklist" data-position="">
    <div class="tcu-accordion">
        <button type="button" class="tcu-accordion-header" id="">
            <span class="tcu-accordion__checklist-item" data-position="1"></span>
            Item 1 Heading
            <span class="tcu-accordion-button-icon"></span>
        </button>
        <div class="tcu-accordion-content">

            <p>Accordion Item 1 content.</p>

        </div>
    </div>
    <div class="tcu-accordion">
        <button type="button" class="tcu-accordion-header" id="">
            <span class="tcu-accordion__checklist-item" data-position="2"></span>
            Item 2 Heading
            <span class="tcu-accordion-button-icon"></span>
        </button>
        <div class="tcu-accordion-content">

            <p>Accordion Item 2 content.</p>

        </div>
    </div>
</div>