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 for 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 the 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 the 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

• Drag And Drop File Upload using JavaScript and PHP
• Ajax File Upload with PHP and jQuery
• How to Implement jQuery Datepicker with Timepicker

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