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>SEBULBA and the pack race past the main arena. The crowd stands and YELLS as the Podracers scream off into the distance. Oh, I don't care what universe you're from, that's gotta hurt. Here he comes, yahoo! At the start of the third and final lap, Sebulba is in the lead, closely followed by Skywalker. Skywalker's been forced onto the service ramp! It's Skywalker! The crowd goes wild. Amazing.</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>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? The Death Star plans are not in the main computer.</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>General Rieekan thinks it's dangerous for any ships to leave the system until we've activated the energy shield. That's a good story. I think you just can't bear to let a gorgeous guy like me out of your sight. I don't know where you get you delusions, laser brain. Laugh it up, fuzz ball. But you didn't see us alone in the south passage. She expressed her true feelings for me.</p>
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </section>
</div>