In general term, the word collapse is a view of hierarchy so that only the roots of each branch are visible. It is widely used to manage large content and navigation lists on the website. We can easily create collapsing division within a webpage which is used to build accordion navigation, content boxes etc.
also read:
The following examples demonstrate use of different techniques used for implementing the collapse plugin in Bootstrap. If you have any questions about bootstrap collapse plugin, please write it in the comments section.
Bootstrap Collapsible Accordion
The following example explains how to create collapsible accordion by using the .collapse class. The content can be shown by using the .collapse.in class. The following is an example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion</h2>
<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="#collapse-one">HTML</a>
</h4>
</div>
<div id="collapse-one" class="panel-collapse collapse in">
<div class="panel-body">
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-two">JavaScript</a>
</h4>
</div>
<div id="collapse-two" class="panel-collapse collapse">
<div class="panel-body">
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-three">CSS</a>
</h4>
</div>
<div id="collapse-three" class="panel-collapse collapse">
<div class="panel-body">
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Collapsible Accordion via Data Attributes
The Bootstrap enables to expand and collapse specific element by using some data attributes in the collapse plugin. We can add data-toggle to a controller element such as button or an anchor on which we click to expand or collapse the component. The data target attribute is added to the parent component which accepts id or class selector whose value is id of the child component. To create accordion-like group, use the data attribute data-parent=”#selector” and the value of the data parent attribute is same as the value of the main container div. We can also keep element open by using the additional class“in”.
The following is an example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
p{
border: 2px solid orange;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion via Data Attributes</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Collapsible Accordion via JavaScript
We can expand and collapse the element by using Bootstrap’s collapse() method with id or class selector in the JavaScript code as shown in the below example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#demo-toggle").collapse(‘toggle’);
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion via JavaScript</h2>
<button type="button" class="btn btn-success">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Collapse Options
There are certain options which can be used with Bootstrap collapse plugin as shown the below table:
| Name | Type | Default Value | Description |
|---|---|---|---|
| parent | selector | false | If the value is selector, all the elements under the specified parent will be closed. |
| toggle | boolean | true | It triggers when all collapsible elements are toggled. |
Bootstrap Collapse Methods
There are some methods which are used with Bootstrap’s collapse class as shown in the below table:
| Method | Description |
|---|---|
| .collapse(options) | It activates content as collapsible element. |
| .collapse(‘toggle’)</ | It toggles collapsible element which is either shown or hidden. |
| .collapse(‘show’)</ | It is used to show collapsible element. |
| .collapse(‘hide’)</ | It is used to hide collapsible element. |
The following is an example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-false").click(function(){
$("#demo-example").collapse({
toggle:false
});
});
$("#demo-show").click(function(){
$("#demo-example").collapse(‘show’);
});
$("#demo-hide").click(function(){
$("#demo-example").collapse(‘hide’);
});
$("#demo-toggle").click(function(){
$("#demo-example").collapse(‘toggle’);
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion using Methods</h2>
<button type="button" class="btn btn-success" id="toggle-false">Button False</button>
<button type="button" class="btn btn-success" id="demo-show">Show Button</button>
<button type="button" class="btn btn-success" id="demo-hide">Hide Button</button>
<button type="button" class="btn btn-success" id="demo-toggle">Toggle Button</button>
<div id="demo-example">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Collapse Events
There are some events which are used with Bootstrap’s collapse plugin as shown in the below table:
| Event | Description |
|---|---|
| show.bs.collapse | It is used when the show instance method is invoked. |
| shown.bs.collapse | It triggers when collapse element has been made visible to the user. |
| hide.bs.collapse | It is used when the hide instance method has been called. |
| hidden.bs.collapse | It triggers when the collapse element is hidden from the user. |
The following is an example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(‘#demo-toggle’).on(‘hidden.bs.collapse’, function(){
alert("The collapsed element has been hidden!!!");
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion using Events</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text, HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]
