bootstrap
  1. bootstrap-accordion
PreviousNext

Bootstrap Accordion

Bootstrap accordion is a toggleable, collapsible component that allows you to show or hide content with a click.

Syntax

To use Bootstrap accordion in your HTML file, you need to add the following code:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the first item's accordion body.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the second item's accordion body.
            </div>
        </div>
    </div>
</div>

Example

Here is an example of how to create a simple Bootstrap accordion.

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
                plugin adds the appropriate classes that we use to style each element. These classes control the
                overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of
                this with custom CSS or overriding our default variables. It's also worth noting that just about any
                HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
                collapse plugin adds the appropriate classes that we use to style each element. These classes
                control the overall appearance, as well as the showing and hiding via CSS transitions. You can
                modify any of this with custom CSS or overriding our default variables. It's also worth noting that
                just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
                overflow.
            </div>
        </div>
    </div>
</div>
Try Playground

Explanation

In the code above, we used the following classes to create the accordion:

  • card: this is the main class that indicates that this is a card.
  • card-header: this class is applied to the accordion header.
  • btn btn-link: this class is applied to the button that toggles the display of the accordion item.
  • collapse: this class is applied to the content that will be shown or hidden.
  • show: this class is used to indicate that the content should be visible when the accordion is loaded.
  • data-toggle="collapse": this attribute is added to the button to tell Bootstrap that it should toggle the display of the content.
  • data-target: this attribute is added to the button and points to the ID of the content that will be shown or hidden.
  • data-parent: this attribute is added to the content and points to the ID of the accordion container.

Use

Bootstrap accordion can be used to show or hide content in a collapsible way. It can be useful to reduce clutter and make it easier for users to navigate through a website.

Important Points

  • Bootstrap accordion is a toggleable, collapsible component that allows you to show or hide content with a click.
  • Accordion items can be expanded or collapsed by clicking on the header.
  • Bootstrap accordion requires you to have the data-toggle, data-target, and data-parent attributes correctly set.

Summary

Bootstrap accordion is a great tool for showing or hiding content in a collapsible way. By using Bootstrap accordion, you can make it easier for your website users to navigate through your content.

ModalAlerts
Published on: