Commentary

Accordions are the classic vertically collapsable content areas. Two formats are available a) classic primarily used for small amounts of text like FAQs and b) with a border whose color can be changed and meant primarily for an aside.

This implementation uses the HTML details tag. This tag has built in the ability to open and close a content body. This body can be a p, div or article child. This allows you to add any other element or component to the accordion.

Usage

Classes:
.accordions Provides a container for a group of accordions.
.accordion Defines an individual accordion item.
.is-expander Provides an alternate layout for collapsable areas that can also be styled with a bottom border color.
Alternative Border Modifiers: .is-expander-primary, .is-expander-secondary, .is-expander-tertiary, .is-expander-link, .is-expander-success, .is-expander-warning, .is-expander-danger
Dependencies:
File: accordions.css
Variables: --bg-main, --bg-main-ter, --danger, --link, --margin, --mar-vert, --padding-normal, --primary, --radius-comp, --secondary,--shadow, --success, --tertiary, --text-comp, --warning, --weight-semibold

Examples

Single Accordion

Accordion FAQ Details

Something small enough to escape casual notice.

Accordion Aside Style Details

Profit is not the purpose of a business, but rather the test of its validity. The purpose of a business is to create and keep a customer.

Peter Drucker, Innovation and Entrepreneurship 
<details class="accordion">
    <summary>Accordion FAQ Details</summary>
    <div>
        <p>Something small enough to escape casual notice.</p>
    </div>
</details>

<details class="accordion is-expander-primary">
    <summary>Accordion Aside Style Details</summary>
    <div>
        <figure class="blockquote">
            <blockquote cite="https://www.goodreads.com/quotes/search?utf8=%E2%9C%93&q=peter+drucker+purpose&commit=Search">
                <p>Profit is not the purpose of a business, but rather the test of its validity.
                    The purpose of a business is to create and keep a customer. </p>
            </blockquote>
            <figcaption>
                <a href="https://en.wikipedia.org/wiki/Peter_Drucker" target="_blank">Peter Drucker</a>,
                <cite>Innovation and Entrepreneurship</cite>
            </figcaption>
        </figure>
    </div>
</details>

Accordions Group

One - Accordion Quote

Profit is not the purpose of a business, but rather the test of its validity. The purpose of a business is to create and keep a customer.

Peter Drucker, Innovation and Entrepreneurship
Two - Accordion Details
Two Something small enough to escape casual notice.
Three - Accordion Details

Three Something small enough to escape casual notice.

One - Accordion Quote

Profit is not the purpose of a business, but rather the test of its validity. The purpose of a business is to create and keep a customer.

Peter Drucker, Innovation and Entrepreneurship
Two - Accordion Details
Two Something small enough to escape casual notice.
Three - Accordion Details

Three Something small enough to escape casual notice.

<div class="accordions">
    <details class="accordion [is-expander-primary]">
        <summary>One - Accordion Quote</summary>
        <div>
            <figure class="blockquote">
                <blockquote cite="https://www.goodreads.com/quotes/search?utf8=%E2%9C%93&q=peter+drucker+purpose&commit=Search">
                    <p>Profit is not the purpose of a business, but rather the test of its validity.
                        The purpose of a business is to create and keep a customer. </p>
                </blockquote>
                <figcaption>
                    <a href="https://en.wikipedia.org/wiki/Peter_Drucker" target="_blank">Peter Drucker</a>,
                    <cite>Innovation and Entrepreneurship</cite>
                </figcaption>
            </figure>
        </div>
    </details>

    <details class="accordion [is-expander-secondary]">
        <summary>Two - Accordion Details</summary>
        <div>Two Something small enough to escape casual notice.</div>
    </details>

    <details class="accordion [is-expander-tertiary]">
        <summary>Three - Accordion Details</summary>
        <p>Three Something small enough to escape casual notice.</p>
    </details>
</div>