Accordion

This is the accordion component. You can use this component to create collapsible content.

This is the first item's accordion body, and it is shown by default.

This is the second item's accordion body, and it is shown when the appropriate button is clicked.

This is the third item's accordion body, and it is shown when the appropriate button is clicked.

HTML

                        
    <div class="accordion" x-data="{ openItem: 1 }" id="accordion-example-1">
        <!-- Accordion Item 1 -->
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button"
                    @click="openItem = (openItem === 1 ? null : 1)"
                    :class="{ 'collapsed': openItem !== 1 }"
                    :aria-expanded="openItem === 1">
                    Accordion item 1
                </button>
            </h2>
            <div id="collapse-1-1" class="accordion-collapse"
                :class="{ 'show': openItem === 1, 'collapse': openItem !== 1 }"
                data-bs-parent="#accordion-example-1">
                <div class="accordion-body">
                    This is the <strong>first item's</strong> accordion body, and it is shown by default.
                </div>
            </div>
        </div>

        <!-- Accordion Item 2 -->
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                    @click="openItem = (openItem === 2 ? null : 2)"
                    :class="{ 'collapsed': openItem !== 2 }"
                    :aria-expanded="openItem === 2">
                    Accordion item 2
                </button>
            </h2>
            <div id="collapse-1-2" class="accordion-collapse"
                :class="{ 'show': openItem === 2, 'collapse': openItem !== 2 }"
                data-bs-parent="#accordion-example-1">
                <div class="accordion-body">
                    This is the <strong>second item's</strong> accordion body, and it is shown when the appropriate button is clicked.
                </div>
            </div>
        </div>

        <!-- Accordion Item 3 -->
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                    @click="openItem = (openItem === 3 ? null : 3)"
                    :class="{ 'collapsed': openItem !== 3 }"
                    :aria-expanded="openItem === 3">
                    Accordion item 3
                </button>
            </h2>
            <div id="collapse-1-3" class="accordion-collapse"
                :class="{ 'show': openItem === 3, 'collapse': openItem !== 3 }"
                data-bs-parent="#accordion-example-1">
                <div class="accordion-body">
                    This is the <strong>third item's</strong> accordion body, and it is shown when the appropriate button is clicked.
                </div>
            </div>
        </div>

    </div>

Introduction

Components

Accordion