Collapse

<div class="o-collapse">
    <section class="o-collapse__section" role="region" x-data="{ open: true }">
        <button class="o-collapse__title o-split | u-bb u-b-ui" type="button" @click="open = ! open" :aria-expanded="open">
            <h3 class="o-split__title | u-epsilon u-self-middle">Collapse 1</h3>
            <svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" :class="open ? 'is-active' : 'is-inactive'">
                <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-collapse__panel" x-show="open" x-collapse>
            <div class="o-collapse__content" :class="open ? 'is-active' : 'is-inactive'">
                <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
            </div>
        </div>
    </section>
    <section class="o-collapse__section" role="region" x-data="{ open: false }">
        <button class="o-collapse__title o-split | u-bb u-b-ui" type="button" @click="open = ! open" :aria-expanded="open">
            <h3 class="o-split__title | u-epsilon u-self-middle">Collapse 2</h3>
            <svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" :class="open ? 'is-active' : 'is-inactive'">
                <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-collapse__panel" x-show="open" x-collapse style="display: none;">
            <div class="o-collapse__content" :class="open ? 'is-active' : 'is-inactive'">
                <p>Your friends up there on the Sanctuary Moon are walking into a trap. As is your Rebel fleet! It was I who allowed the Alliance to know the location of the shield generator. It is quite safe from your pitiful little band. An entire legion of my best troops awaits them.</p>
            </div>
        </div>
    </section>
    <section class="o-collapse__section" role="region" x-data="{ open: false }">
        <button class="o-collapse__title o-split | u-bb u-b-ui" type="button" @click="open = ! open" :aria-expanded="open">
            <h3 class="o-split__title | u-epsilon u-self-middle">Collapse 3</h3>
            <svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" :class="open ? 'is-active' : 'is-inactive'">
                <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-collapse__panel" x-show="open" x-collapse style="display: none;">
            <div class="o-collapse__content" :class="open ? 'is-active' : 'is-inactive'">
                Looks like our friends got in! Red Four! Red Six! Cover us! I'm on it! Roger! Everybody else, hit the target hard! Give it everything you got! I need some help here! I need some help! I'm coming in! Watch out! I'm hit! All teams - I'm going in! Pull up and cover me! Copy that, Black Leader! Good luck, Poe! Prepare to fire. You need a teacher! I can show you the ways of the Force! The Force. Lieutenant, get back to your station! Just look. We won't survive -- even Hux has gone! Supreme Leader.
            </div>
        </div>
    </section>
</div>