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>