Collapse methods in Bootstrap

How to use collapse methods in Bootstrap?

Collapse Methods

There are different types of collapse methods.

They are

Collapse toggle
Collapse show
Collapse hide

collapse toggle

<div class="container">
            <h2>Collapsible Methods</h2>
            <button type="button" class="btn btn-primary">Toggle</button>
            <div class="collapse">
                TechFunda is a online tutorial 
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $(".btn-primary").click(function () {
                    $(".collapse").collapse('toggle');
                });               
            });
        </script>

In the above code snippet we have defined the toggle with collapse which opens the content, we have created button with class value btn-primary and we have script function to give the toggle we have .btn-primary to call the button to click function and we have .collaspe toggle, when we click the button it opens the content

output

Collapse show and hide

It is used to show the content and hide the content

 <div class="container">
            <h2>Collapsible Methods</h2>
            <button type="button" class="btn btn-primary">show</button>
            <button type="button" class="btn btn-danger">hide</button>

            <div class="collapse">
                TechFunda is a online tutorial 
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $(".btn-primary").click(function () {
                    $(".collapse").collapse('show');
                });
                $(".btn-danger").click(function () {
                    $(".collapse").collapse('hide');
                });               
            });
        </script>

Collapse show and hide

In the above code snippet we have defined the collapse show and hide property we have two buttons with show and hide values and we have script function with .btn-primary and .btn-danger which calls the button to click and collapse show and hide shows and hides the content

output