How to Create Dynamic Bootstrap Accordion

Accordion(collapsible content) is the best way to toggle(hide and show) large content. The accordion is used to display more data in less space. It works in a collapse-expand format. Using the accordion one can hide and see content between different sections.

A FAQ(frequently asked questions) is one of the commonly used examples of the accordion. 

For this tutorial, I will integrate a Bootstrap accordion. Bootstrap comes with a lot of useful components that can easily be integrated into the website. One of the components is the accordion. If you want to see how Bootstrap’s accordion works then check out an example here.

In this article, I show you how to make a dynamic Bootstrap accordion. We will first add a static accordion and then make it dynamic.

How to Add Static Bootstrap Accordion

Adding the static Bootstrap accordion on the website is super easy. You just need to copy the source code provided by Bootstrap and place it wherever you want. In addition to this, you need to include CSS and JS files of Bootstrap.

Below is the sample code of adding a static Bootstrap accordion.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <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" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <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" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

The above code will display a static accordion on your webpage. However, the purpose of this tutorial is to create a dynamic Bootstrap accordion. So, let’s do it in the next step.

Create a Dynamic Bootstrap Accordion

If you closely look at the HTML of accordion, you will notice the same kind of markup gets repeated. While making it dynamic, it needs to pass dynamic values to some of the attributes like id, class, aria-expanded, aria-controls, etc in this markup. Rest will be done automatically.

I first make a multi-dimensional array containing title and content from the above HTML. We will loop through this array and make things dynamic.

The code below generates a dynamic Bootstrap accordion.

<?php
$arr_result = array(
    array(
        'title' => 'Accordion Item #1',
        'content' => '<strong>This is the first item\'s accordion body.</strong>'
    ),
    array(
        'title' => 'Accordion Item #2',
        'content' => '<strong>This is the second item\'s accordion body.</strong>'
    ),
    array(
        'title' => 'Accordion Item #3',
        'content' => '<strong>This is the third item\'s accordion body.</strong>'
    ),
);
?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
    <?php for($i=0; $i<count($arr_result); $i++) { ?>
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading<?php echo $i; ?>">
                <button class="accordion-button <?php echo ($i>0) ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==0) ? 'true' : 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
                    <?php echo $arr_result[$i]['title']; ?>
                </button>
            </h2>
            <div id="collapse<?php echo $i; ?>" class="accordion-collapse collapse <?php echo ($i==0) ? 'show' : ''; ?>" aria-labelledby="heading<?php echo $i; ?>" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <?php echo $arr_result[$i]['content']; ?>
                </div>
            </div>
        </div>    
    <?php } ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

Go ahead and test it on your browser. You should get a working Bootstrap accordion.

I hope you understand how to create a dynamic Bootstrap accordion. Please share your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

5 thoughts on “How to Create Dynamic Bootstrap Accordion

  1. Is there any way to do this with a nested (3-tiered) accordion – being that the id, class, aria-expanded, aria-controls, etc. have to be incremented in some way ($i++) ?

  2. very nice article and it has helped me on my website thank you so much, sir perfect solutions collapsible
    panel many people have confusion about to fetch data from database dynamically but u gave me perfect solution.

  3. Only solution that actually worked to utilize dynamic content from a database, I was able to get the accordion to work but not collapse and with this demo it is working perfect now. Thank You!

Leave a Reply

Your email address will not be published.