Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Bootstrap accordion with arrows

Suggested Video Tutorials
Part 36 - Bootstrap media object
Part 37 - Bootstrap collapse plugin
Part 38 - Bootstrap accordion



In this video we will discuss creating an accordion with arrows using bootstrap. This is continuation to Part 38. Please watch Part 38 from Bootstrap tutorial before proceeding.



When an accordion panel is expanded, an arrow pointing upwards should be displayed indicating that if we click again the panel will collapse. Along the same lines, a downward pointing arrow should be displayed when the panel is collapsed, indicating that panel will be expanded if we click on it again. We will be using the Bootstrap Glyphicons to achieve this.

Bootstrap accordion with arrows

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-6">

                <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">
                                    <span class="glyphicon glyphicon-menu-up"></span>
                                    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">
                                    <span class="glyphicon glyphicon-menu-down"></span>
                                    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">
                                    <span class="glyphicon glyphicon-menu-down"></span>
                                    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>

            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.collapse').on('shown.bs.collapse', function () {
                $(this).parent().find('.glyphicon-menu-down')
                                .removeClass('glyphicon-menu-down')
                                .addClass('glyphicon-menu-up');
            }).on('hidden.bs.collapse', function () {
                $(this).parent().find(".glyphicon-menu-up")
                                .removeClass("glyphicon-menu-up")
                                .addClass("glyphicon-menu-down");
            });
        });
    </script>
</body>
</html>

If you want plus and minus icons instead of UP and DOWN arrows, replace the <span> elements with glyphicon-minus-sign and glyphicon-plus-sign

<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon glyphicon-plus-sign"></span>

We also need to change the jQuery code as shown below

<script type="text/javascript">
    $(document).ready(function () {
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find('.glyphicon-plus-sign')
                    .removeClass('glyphicon-plus-sign')
                    .addClass('glyphicon-minus-sign');
        }).on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus-sign")
                            .removeClass("glyphicon-minus-sign")
                            .addClass("glyphicon-plus-sign");
        });
    });
</script>

With the above 2 simple changes, the accordion looks as shown below.

bootstrap accordion plus minus sign

Expanding and collapsing all the panels on click of a button

bootstrap accordion expand collapse all

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-6">

                <div class="well">
                    <button class="btn btn-primary" id="btnExpandAll">
                        Expand All
                    </button>
                    <button class="btn btn-primary" id="btnCollapseAll">
                        Collapse All
                    </button>
                </div>

                <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">
                                    <span class="glyphicon glyphicon-minus-sign"></span>
                                    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">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                    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">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                    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>

            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find('.glyphicon-plus-sign')
                   .removeClass('glyphicon-plus-sign')
                   .addClass('glyphicon-minus-sign');
        }).on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus-sign")
                   .removeClass("glyphicon-minus-sign")
                   .addClass("glyphicon-plus-sign");
        });

        $('#btnExpandAll').click(function () {
            $('.panel-collapse.collapse').collapse('show');
        });

        $('#btnCollapseAll').click(function () {
            $('.panel-collapse.collapse.in').collapse('hide');
        });
    </script>
</body>
</html>

bootstrap tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources