There are different types of collapse methods.
They are
<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
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>
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
Views: 3379 | Post Order: 50