Accordion

<div class="o-accordion" x-data="{ active: 1 }">
    <section class="o-accordion__section" role="region" x-data="{ id: 1, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
        <button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
            <h3 class="o-split__title | u-epsilon">Accordion 1</h3>
            <svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
                <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                    <path d="M2 2l12 12"></path>
                    <path d="M14 2L2 14"></path>
                </g>
            </svg>
        </button>
        <div class="o-accordion__panel" x-show="expanded" x-collapse>
            <div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum fuga quidem odio provident accusantium optio aspernatur, modi, quas doloremque soluta, vel eos aut rem voluptas molestias illum magni facilis ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ducimus nihil esse nulla quisquam laborum nobis suscipit, tenetur in exercitationem nostrum quidem impedit, ex ea, blanditiis reiciendis vitae ipsa dolore?</p>
            </div>
        </div>
    </section>

    <section class="o-accordion__section" role="region" x-data="{ id: 2, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
        <button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
            <h3 class="o-split__title | u-epsilon">Accordion 2</h3>
            <svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
                <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                    <path d="M2 2l12 12"></path>
                    <path d="M14 2L2 14"></path>
                </g>
            </svg>
        </button>
        <div class="o-accordion__panel" x-show="expanded" x-collapse style="display: none;">
            <div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit, corporis. Fuga harum quaerat, odit non, ducimus facilis adipisci facere quo temporibus deserunt necessitatibus beatae quam error id asperiores exercitationem soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe illum cupiditate quod molestiae, exercitationem, sapiente voluptatem odit fugit placeat impedit eum corporis minus tenetur possimus quia magnam. Culpa, nesciunt iste.</p>
                <ol>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ol>
            </div>
        </div>
    </section>

    <section class="o-accordion__section" role="region" x-data="{ id: 3, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
        <button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
            <h3 class="o-split__title | u-epsilon">Accordion 3</h3>
            <svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
                <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                    <path d="M2 2l12 12"></path>
                    <path d="M14 2L2 14"></path>
                </g>
            </svg>
        </button>
        <div class="o-accordion__panel" x-show="expanded" x-collapse style="display: none;">
            <div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam culpa vel qui explicabo est dolores! Alias temporibus nulla perferendis, fugit adipisci perspiciatis incidunt? Commodi ea dolore ad tenetur, officia excepturi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, minus fugiat earum in sit tempore beatae numquam rem dignissimos quisquam perspiciatis. Dolorem excepturi adipisci earum magni neque aut provident est?</p>
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </section>
</div>

<details class="o-accordion" name="shared_name" open>
    <summary class="o-accordion__title o-split | u-bb u-b-ui">
        <h3 class="o-split__title | u-epsilon">Details 1</h3>
        <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
            <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                <path d="M2 2l12 12"></path>
                <path d="M14 2L2 14"></path>
            </g>
        </svg>
    </summary>
    <div class="o-accordion__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas perspiciatis eveniet fugiat repudiandae commodi modi debitis vel, itaque nobis molestiae? Animi, adipisci quisquam neque obcaecati quam rem dicta voluptatibus doloremque.</p>
    </div>
</details>
<details class="o-accordion" name="shared_name">
    <summary class="o-accordion__title o-split | u-bb u-b-ui">
        <h3 class="o-split__title | u-epsilon">Details 2</h3>
        <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
            <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                <path d="M2 2l12 12"></path>
                <path d="M14 2L2 14"></path>
            </g>
        </svg>
    </summary>
    <div class="o-accordion__content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit, corporis. Fuga harum quaerat, odit non, ducimus facilis adipisci facere quo temporibus deserunt necessitatibus beatae quam error id asperiores exercitationem soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe illum cupiditate quod molestiae, exercitationem, sapiente voluptatem odit fugit placeat impedit eum corporis minus tenetur possimus quia magnam. Culpa, nesciunt iste.</p>
        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ol>
    </div>
</details>
<details class="o-accordion" name="shared_name">
    <summary class="o-accordion__title o-split | u-bb u-b-ui">
        <h3 class="o-split__title | u-epsilon">Details 3</h3>
        <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
            <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
                <path d="M2 2l12 12"></path>
                <path d="M14 2L2 14"></path>
            </g>
        </svg>
    </summary>
    <div class="o-accordion__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam culpa vel qui explicabo est dolores! Alias temporibus nulla perferendis, fugit adipisci perspiciatis incidunt? Commodi ea dolore ad tenetur, officia excepturi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, minus fugiat earum in sit tempore beatae numquam rem dignissimos quisquam perspiciatis. Dolorem excepturi adipisci earum magni neque aut provident est?</p>
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>
    </div>
</details>