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>
                <svg width="31" height="30" class="tcu-accordion__check-icon" viewBox="0 0 39 38" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none" fill-rule="evenodd">
                        <path d="M19 38C8.523 38 0 29.476 0 19 0 8.523 8.523 0 19 0c3.369 0 6.678.893 9.57 2.583a1.532 1.532 0 1 1-1.546 2.644A15.916 15.916 0 0 0 19 3.063c-8.787 0-15.937 7.15-15.937 15.937 0 8.788 7.15 15.937 15.937 15.937 8.788 0 15.936-7.15 15.936-15.937 0-1.312-.158-2.612-.47-3.865a1.532 1.532 0 1 1 2.972-.742C37.81 15.89 38 17.44 38 19c0 10.476-8.523 19-19 19" fill="#4D1979" />
                        <path d="M18.905 26h-.02a1.53 1.53 0 0 1-1.172-.57L9.337 15.023a1.527 1.527 0 0 1 .234-2.148 1.53 1.53 0 0 1 2.149.233l7.214 8.964 17.37-20.53a1.53 1.53 0 0 1 2.154-.181c.645.545.726 1.508.18 2.153L20.073 25.459c-.29.343-.718.541-1.167.541" fill="#777" />
                    </g>
                </svg>
                Item 1 Heading
            </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>
                <svg width="31" height="30" class="tcu-accordion__check-icon" viewBox="0 0 39 38" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none" fill-rule="evenodd">
                        <path d="M19 38C8.523 38 0 29.476 0 19 0 8.523 8.523 0 19 0c3.369 0 6.678.893 9.57 2.583a1.532 1.532 0 1 1-1.546 2.644A15.916 15.916 0 0 0 19 3.063c-8.787 0-15.937 7.15-15.937 15.937 0 8.788 7.15 15.937 15.937 15.937 8.788 0 15.936-7.15 15.936-15.937 0-1.312-.158-2.612-.47-3.865a1.532 1.532 0 1 1 2.972-.742C37.81 15.89 38 17.44 38 19c0 10.476-8.523 19-19 19" fill="#4D1979" />
                        <path d="M18.905 26h-.02a1.53 1.53 0 0 1-1.172-.57L9.337 15.023a1.527 1.527 0 0 1 .234-2.148 1.53 1.53 0 0 1 2.149.233l7.214 8.964 17.37-20.53a1.53 1.53 0 0 1 2.154-.181c.645.545.726 1.508.18 2.153L20.073 25.459c-.29.343-.718.541-1.167.541" fill="#777" />
                    </g>
                </svg>
                Item 2 Heading
            </span>
        </button>
        <div class="tcu-accordion-content">

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

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