Bootstrap accordion

In this video we will discuss how to build an accordion using Bootstrap. In previous tutorial, we discussed the bootstrap collapse plugin. In this video we will discuss how to build an accordion using the collapse plugin. 

Bootstrap tutorial for beginners

 

<div id="accordion" class="panel-group">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyOne" data-toggle="collapse" data-parent="#accordion">

                    Asia

                </a>

            </h4>

        </div>

        <div id="panelBodyOne" class="panel-collapse collapse in">

            <div class="panel-body">

                <ul>

                    <li>India</li>

                    <li>China</li>

                    <li>Japan</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyTwo" data-toggle="collapse" data-parent="#accordion">

                    Europe

                </a>

            </h4>

        </div>

        <div id="panelBodyTwo" class="panel-collapse collapse">

            <div class="panel-body">

                <ul>

                    <li>United Kingdom</li>

                    <li>France</li>

                    <li>Germany</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyThree" data-toggle="collapse" data-parent="#accordion">

                    North America

                </a>

            </h4>

        </div>

        <div id="panelBodyThree" class="panel-collapse collapse">

            <div class="panel-body">

                <ul>

                    <li>USA</li>

                    <li>Canada</li>

                    <li>Mexico</li>

                </ul>

            </div>

        </div>

    </div>

</div>

Please note : 
1. To have all the accordion panels collapsed on the initial load use collapse class
2. Similarly, to have all the accordion panels expanded on the initial load use collapse and in classes 

You can also place images in the accordion. For the purpose of this demo, I have used the images that come with the Windows operating system. On a Windows 7 machine, you can find these images at C:\Users\Public\Pictures\Sample Pictures.  
 

<div id="accordion" class="panel-group">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyOne" data-toggle="collapse" data-parent="#accordion">

                    Desert

                </a>

            </h4>

        </div>

        <div id="panelBodyOne" class="panel-collapse collapse in">

            <div class="panel-body">

                <img class="img-responsive" src="Images/Desert.jpg" alt="desert" />

            </div>

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyTwo" data-toggle="collapse" data-parent="#accordion">

                    Penguins

                </a>

            </h4>

        </div>

        <div id="panelBodyTwo" class="panel-collapse collapse">

            <div class="panel-body">

                <img class="img-responsive" src="Images/Penguins.jpg" alt="penguins" />

            </div>

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panelBodyThree" data-toggle="collapse" data-parent="#accordion">

                    Jellyfish

                </a>

            </h4>

        </div>

        <div id="panelBodyThree" class="panel-collapse collapse">

            <div class="panel-body">

                <img class="img-responsive" src="Images/Jellyfish.jpg" alt="jellyfish" />

            </div>

        </div>

    </div>

</div>