HI WELCOME TO SIRING

Bootstrap collapse plugin

In this we will discuss the Bootstrap collapse plugin. 

Bootstrap tutorial for beginners

The collapse plugin is used to show and hide another element on the page. Let us understand the collapse plugin with an example. 

The "Toggle Image Gallery" button should toggle the visibility of the "Image Gallery" 
bootstrap collapse plugin example 

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="btn btn-primary" data-toggle="collapse" href="#imageGallery">
                    Toggle Image Gallery
                </a>
            </div>
            <div class="panel-body collapse" id="imageGallery">
                <div class="col-xs-4">
                    <a href="Images/Chrysanthemum.jpg" class="thumbnail">
                        <p>Chrysanthemum</p>
                        <img src="Images/Chrysanthemum.jpg" />
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="Images/Desert.jpg" class="thumbnail">
                        <p>Desert</p>
                        <img src="Images/Desert.jpg" />
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="Images/Hydrangeas.jpg" class="thumbnail">
                        <p>Hydrangeas</p>
                        <img src="Images/Hydrangeas.jpg" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

We discussed Image Gallery in Part 7 of Bootstrap tutorial.

Please note :
1. data-toggle="collapse" is required on the anchor element to show and hide the <div> element that has the id as imageGallery

2. collapse class on the <div> element that has the id as imageGallery, keeps the Image Gallery hidden when the page initially loads. To keep the Image Gallery expanded on the initial load, use collapse and in classes.
<div class="panel-body collapse in" id="imageGallery">

3. Button element can also be used as the trigger element, instead of an anchor element
<button class="btn btn-primary" data-toggle="collapse" data-target="#imageGallery">
    Toggle Image Gallery
</button>

In the example above we have used data attributes to expand and collapse Image gallery. We can also manually do this using the collapse() function provided by the collapse plugin. The following are the values that can be passed to the collapse function

<table style="border-collapse:collapse" border="1">
    <tbody>
        <tr>
            <td style="padding:3px">collapse(toggle)</td>
            <td style="padding:3px">Toggles a collapsible element</td>
        </tr>
        <tr>
            <td style="padding:3px">collapse(show)</td>
            <td style="padding:3px">Shows a collapsible element</td>
        </tr>
        <tr>
            <td style="padding:3px">collapse(hide)</td>
            <td style="padding:3px">Hides a collapsible element</td>
        </tr>
    </tbody>
</table>

The following example demonstrates expanding and collapsing the Image Gallery manually using the collapse() function 
expand collapse using bootstrap

<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="panel panel-default">
                <div class="panel-heading">
                    <button class="btn btn-primary" id="toggleButton">
                        Toggle Image Gallery
                    </button>
                    <button class="btn btn-primary" id="hideButton">
                        Hide Image Gallery
                    </button>
                    <button class="btn btn-primary" id="showButton">
                        Show Image Gallery
                    </button>
                </div>
                <div class="panel-body collapse in" id="imageGallery">
                    <div class="col-xs-4">
                        <a href="Images/Chrysanthemum.jpg" class="thumbnail">
                            <p>Chrysanthemum</p>
                            <img src="Images/Chrysanthemum.jpg" />
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <a href="Images/Desert.jpg" class="thumbnail">
                            <p>Desert</p>
                            <img src="Images/Desert.jpg" />
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <a href="Images/Hydrangeas.jpg" class="thumbnail">
                            <p>Hydrangeas</p>
                            <img src="Images/Hydrangeas.jpg" />
                        </a>
                    </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 () {
            $('#toggleButton').click(function () {
                $('#imageGallery').collapse('toggle');
            });

            $('#hideButton').click(function () {
                $('#imageGallery').collapse('hide');
            });

            $('#showButton').click(function () {
                $('#imageGallery').collapse('show');
            });
        });
    </script>
</body>
</html>

Events raised by the collapse plugin
EventDescription
show.bs.collapseFired immediately when the show method is called
shown.bs.collapseFired when a collapse element has been made visible to the user
hide.bs.collapseFired immediately when the hide method is called
hidden.bs.collapseFired when a collapse element has been hidden from the user

The following example handles all the 4 events
<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="panel panel-default">
                <div class="panel-heading">
                    <button class="btn btn-primary" id="toggleButton">
                        Toggle Image Gallery
                    </button>
                    <button class="btn btn-primary" id="hideButton">
                        Hide Image Gallery
                    </button>
                    <button class="btn btn-primary" id="showButton">
                        Show Image Gallery
                    </button>
                </div>
                <div class="panel-body collapse in" id="imageGallery">
                    <div class="col-xs-4">
                        <a href="Images/Chrysanthemum.jpg" class="thumbnail">
                            <p>Chrysanthemum</p>
                            <img src="Images/Chrysanthemum.jpg" />
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <a href="Images/Desert.jpg" class="thumbnail">
                            <p>Desert</p>
                            <img src="Images/Desert.jpg" />
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <a href="Images/Hydrangeas.jpg" class="thumbnail">
                            <p>Hydrangeas</p>
                            <img src="Images/Hydrangeas.jpg" />
                        </a>
                    </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 () {
            $('#toggleButton').click(function () {
                $('#imageGallery').collapse('toggle');
            });

            $('#hideButton').click(function () {
                $('#imageGallery').collapse('hide');
            });

            $('#showButton').click(function () {
                $('#imageGallery').collapse('show');
            });

            $('#imageGallery').on('show.bs.collapse'function () {
                alert('Image Gallery is about to be expanded');
            });

            $('#imageGallery').on('shown.bs.collapse'function () {
                alert('Image Gallery is expanded');
            });

            $('#imageGallery').on('hide.bs.collapse'function () {
                alert('Image Gallery is about to be collapsed');
            });

            $('#imageGallery').on('hidden.bs.collapse'function () {
                alert('Image Gallery is collapsed');
            });
        });
    </script>
</body>
</html>