Bootstrap Collapse Plugin

Collapse Plugin is used when there is a large amount of data or content and the user wants to show or hide it. Collapses are used because they make the divisions of the page much easier.

The collapse plugin can be added into bootstrap individually by including the collapse.js files. The collapse plugin is dependent on the transition plugin. Collapse plugin can also be added all at once when we use bootstrap.js files.

The collapse plugin can also be used to create collapsible groups. Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “panel- group” id = “collapsible” >

< div class = “panel panel- default” >

< div class = “panel- heading” >

< h4 class = “panel- title” >

< a data- toggle = “collapse” data- parent = “#collapsible” href = “#collapse1” >

Click to expand. If you want to collapse, click again. JAVA

</ a >

</ h4 >

</ div >

< div id = “collapse1” class = “panel- collapse collapse in” >

< div class = “panel- body” >

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems.

</ div >

</ div >

</ div >

< div class = “panel panel- default” >

< div class = “panel- heading” >

< h4 class = “panel- title” >

< a data- toggle = “collapse” data- parent = “#collapsible” href = “#collapse2” >

Click to expand. If you want to collapse, click again. C++

</ a >

</ h4 >

</ div >

< div id = “collapse2” class = “panel- collapse collapse” >

< div class = “panel- body” >

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc.

</ div >

</ div >

</ div >

< div class = “panel panel- default” >

< div class = “panel- heading” >

< h4 class = “panel- title” >

< a data- toggle = “collapse” data- parent = “#collapsible” href = “#collapse3” >

Click to expand. If you want to collapse, click again. Python

</ a >

</ h4 >

</ div >

< div id = “collapse3” class = “panel- collapse collapse” >

< div class = “panel- body” >

Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand.

</ div >

</ div >

</ div >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

collapse

In the above example, data-toggle = “collapse” is used for the link to expand.

We can also use collapse plugin to create collapsible but with the accordion markup. Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<button type = “button” class = “btn btn-success” data-toggle = “collapse” data-target = “#demo”>

Collapsible without accordion

</button>

<div id = “demo” class = “collapse in”>

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc.

</div>

</body>

</html>

The above example will generate the following result:

OUTPUT:

collapsible


Usage:

Consider the following table in which there are classes that are used by collapse:

Name of Class Description
.collapse This class is used to hide the content.
.collapse.in This class is used to show the content.
.collapsing This class is used when the transition is starts and it is removed when the transition is finished.

Collapse plugin can be used through one of the following ways:


By using data attributes:

Collapse plugin can be used by using data-toggle = “collapse”and data-target. It should be noted here that .collapse class is used inside the collapsible element. We can use the data-parent = “#selector” attribute to add accordion-like group


By using JavaScript:

A single line of code of JavaScript can be used to call a collapse plugin. Consider the following statement:

$ (‘.collapse’). collapse ()


Options:

Consider the following table in which options for collapse plugin are described:

Option Type Default value Data Attribute Description
parent selector Default: false data- parent This option is used to close all those elements (collapsible) that are under the parent.
toggle Boolean Default: false data-toggle This option is used to toggle the collapsible element.

Methods:

Consider the table in which the methods of collapsible elements are described:

Method Description Basic Syntax
Options- .collapse(options) This option is used to activate the content as collapsible element, $(‘#identifier’).collapse({

toggle: false

})

 

Toggle- .collapse(‘toggle’) This option is used to toggle a collapsible element by hiding or showing it. $(‘#identifier’).collapse(‘toggle’)

 

Show- .collapse(‘show’) This option is used to show the collapsible element. $(‘#identifier’).collapse(‘show’)

 

Hide- .collapse(‘hide’) This option is used to hide the collapsible element. $(‘#identifier’).collapse(‘hide’)

 


Example:

Consider the following example in which methods for collapsible elements are used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div class = “panel-group” id = “accordion”>

<div class = “panel panel-default”>

<div class = “panel-heading”>

<h4 class = “panel-title”>

<a data-toggle = “collapse” data-parent = “#accordion” href = “#collapse1”>

Click to expand. If you want to collapse click again. (Using hide method)

</a>

</h4>

</div>

<div id = “collapse1” class = “panel-collapse collapse in”>

<div class = “panel-body”>

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories.

</div>

</div>

</div>

<div class = “panel panel-success”>

<div class = “panel-heading”>

<h4 class = “panel-title”>

<a data-toggle = “collapse” data-parent = “#accordion” href = “#collapse2”>

Click to expand. If you want to collapse click again. (Using show method)

</a>

</h4>

</div>

<div id = “collapse2” class = “panel-collapse collapse”>

<div class = “panel-body”>

C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc.

</div>

</div>

</div>

<div class = “panel panel-info”>

<div class = “panel-heading”>

<h4 class = “panel-title”>

<a data-toggle = “collapse” data-parent = “#accordion” href = “#collapse3”>

Click to expand. If you want to collapse click again. (Using toggle method)

</a>

</h4>

</div>

<div id = “collapse3” class = “panel-collapse collapse”>

<div class = “panel-body”>

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems.

</div>

</div>

</div>

<div class = “panel panel-warning”>

<div class = “panel-heading”>

<h4 class = “panel-title”>

<a data-toggle = “collapse” data-parent = “#accordion” href = “#collapse4”>

Click to expand. If you want to collapse click again. (Using Option method)

</a>

</h4>

</div>

<div id = “collapse4” class = “panel-collapse collapse”>

<div class = “panel-body”>

Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</div>

</div>

</div>

</div>

<script type = “text/javascript”>

$(function () { $(‘#collapse4’).collapse({

toggle: false

}) });

$(function () { $(‘#collapse2’).collapse(‘show’)});

$(function () { $(‘#collapse3’).collapse(‘toggle’)});

$(function () { $(‘#collapse1’).collapse(‘hide’)});

</script>

</body>

</html>

The above example will generate the following result:

OUTPUT:

following result


Events:

Consider the following table in which events of collapsible elements are described:

Event Description Basic Syntax
show.bs.collapse This event is occurred when the show method is invoked. $(‘#popover1’).on(‘show.bs.collapse’, function () {

Body

})

 

show.bs.collapse This event is occurred when the collapse element has been shown. $(‘#popover1’).on(‘shown.bs.collapse’, function () {

Body

})

 

hide.bs.collapse This event is occurred when the hide method is invoked. $(‘popover1’).on(‘hide.bs.collapse’, function () {

Body

})

 

hidden.bs.collapse This event is occurred when the collapse has been hidden from the user. $(‘#popover1’).on(‘hidden.bs.collapse’, function () {

Body

})

 

Example:

Consider the following example in which we have used events of collapse plugin:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “panel- group” id = “accordion” >

< div class = “panel panel- info” >

< div class = “panel- heading” >

< h4 class = “panel- title” >

< a data- toggle = “collapse” data- parent = “#accordion” href = “#collapse1” >

Click to expand. Click again to collapse. (Using Show event)

</ a >

</ h4 >

</ div >

< div id = “collapse1” class = “panel- collapse collapse” >

<div class = “panel-body”>

Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</div>

</div>

</div>

</div>

<script type = “text/javascript”>

$(function () {

$(‘#collapse1’).on(‘show.bs.collapse’, function () {

alert(‘Alert message generated when you click’);

})

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

CODE

When you click an alert message will be shown before expanding, consider the following image:

ok

When you click on OK button, the result will be as follows:

Click