Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.



bootstrap accordion example

<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
images in bootstrap accordion

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

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.