Accordion is one of the components in Bootstrap5, it’s preferred as a better UX technique to increase user attraction. Usually, developers prefer the component to display only the required content that the user wants to know. Rest for more detailed information, the user can expand that particular collapsible section.

 

Accordion is used in website development and you can recognize the pattern as the component is depicted either to hide or show the contents. Bootstrap 5 grants a fantastic component Accordion, that build contents vertically collapsing along with JavaScript Collapse.

 


How do i create Accrodian - boostrap5

Working of Accordion

Accordion works via applying the collapse functionality that turns it collapsible internally. To provide accordion so that users can expand, you need to add .open class over the .accordion function. The specialty of Accordion can be added using a collapse plugin under an appropriate class. An accordion can be inserted along with CSS styling as it controls the classes.

 

The other two sub-parts of this component are Flush and Always Open Accordion. The functionality is similar but a slight difference. If you add .accordion-flush under the appropriate class then it removes default the background color, rounded corners so that it provides accordions from edge-to-edge.

 

Another subpart, Always Open Accordion function by adding .accordion-collapse that turns accordion item to be open until another accordion item is opened. This accordion is placed under the parent container, hence is accessed through the class using anyone of the CSS styling. It is by default in a hidden format.

 

For example,

<div class="accordion" id="accordiontrial">

  <div class="accordion-item-placed">

    <h2 class="accordion-hearder" id="hone">

      <button class="accordion-b" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">

        Accordion Item1

      </button>

    </h2>

</div>

 

Subscribe For Daily Updates