Bootstrap accordion

Suggested Video Tutorials
Part 35 - Bootstrap jumbotron
Part 36 - Bootstrap media object
Part 37 - Bootstrap collapse plugin



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

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