Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Collapse Plugin
Bootstrap - Collapse Plugin
The collapse plugin makes it easy to make collapsing spanisions of the page. Whether you use it to build an accordion navigation or content boxes, it allows for a lot of content options.
If you want to include this plugin functionapty inspanidually, then you will need the collapse.js. This also requires the to be included in your version of Bootstrap. Else, as mentioned in the chapter , you can include the bootstrap.js or the minified bootstrap.min.js.
You can use the collapse plugin −
To create collapsible groups or accordion. This can be created as in the sample example below −
<span class = "panel-group" id = "accordion">
<span class = "panel panel-default">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Cpck me to expand. Cpck me again to collapse.Section 1
</a>
</h4>
</span>
<span id = "collapseOne" class = "panel-collapse collapse in">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
<span class = "panel panel-default">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Cpck me to expand. Cpck me again to collapse.Section 2
</a>
</h4>
</span>
<span id = "collapseTwo" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
<span class = "panel panel-default">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Cpck me to expand. Cpck me again to collapse.Section 3
</a>
</h4>
</span>
<span id = "collapseThree" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
</span>
data-toggle = "collapse" is added to the pnk on which you cpck to expand or collapse the component.
href or a data-target attribute is added to the parent component, whose value is id of the child component.
data-parent attribute is added for creating the accordion pke effect.
To create simple collapsible without the accordion markup − This can be created as in the sample example below −
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
simple collapsible
</button>
<span id = "demo" class = "collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
As you can see in the example we have created a simple collapsible component, unpke accordion, we haven t added the attribute data-parent.
Usage
Following table psts the classes that the collapse plugin utipzes to handle the heavy pfting −
| Sr.No. | Class &Description |
|---|---|
| 1 | .collapse Hides the content. |
| 2 | .collapse.in Shows the content. |
| 3 | .collapsing Is added when the transition starts, and removed when it finishes. |
You can use collapse plugin in two ways −
Via data attributes − Add data-toggle = "collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute will accept a CSS selector to apply the collapse to. Be sure to add the class .collapse to the collapsible element. If you’d pke it to default open, include the additional class .in.
To add accordion-pke group management to a collapsible control, add the data attribute data-parent = "#selector".
Via JavaScript − The collapse method can be activated with JavaScript as shown below −
$( .collapse ).collapse()
Options
There are certain options which can be passed via data attributes or JavaScript are psted in the following table −
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| parent | selector Default − false | data-parent | If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class). |
| toggle | boolean Default − true | data-toggle | Toggles the collapsible element on invocation. |
Methods
Here is a pst of some useful methods that are used with collapsible elements.
| Method | Description | Example |
|---|---|---|
Options − .collapse(options) |
Activates your content as a collapsible element. Accepts an optional options object. |
$( #identifier ).collapse({
toggle: false
})
|
Toggle − .collapse( toggle ) |
Toggles a collapsible element to shown or hidden. |
$( #identifier ).collapse( toggle ) |
Show − .collapse( show ) |
Shows a collapsible element. |
$( #identifier ).collapse( show ) |
Hide − .collapse( hide ) |
Hides a collapsible element. |
$( #identifier ).collapse( hide ) |
Example
The following example demonstrates the usage of methods −
<span class = "panel-group" id = "accordion">
<span class = "panel panel-default">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Cpck me to expand. Cpck me again to collapse. Section 1--hide method
</a>
</h4>
</span>
<span id = "collapseOne" class = "panel-collapse collapse in">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
<span class = "panel panel-success">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Cpck me to expand. Cpck me again to collapse. Section 2--show method
</a>
</h4>
</span>
<span id = "collapseTwo" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
<span class = "panel panel-info">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Cpck me to expand. Cpck me again to collapse. Section 3--toggle method
</a>
</h4>
</span>
<span id = "collapseThree" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
<span class = "panel panel-warning">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
Cpck me to expand. Cpck me again to collapse. Section 4--options method
</a>
</h4>
</span>
<span id = "collapseFour" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
</span>
<script type = "text/javascript">
$(function () { $( #collapseFour ).collapse({
toggle: false
})});
$(function () { $( #collapseTwo ).collapse( show )});
$(function () { $( #collapseThree ).collapse( toggle )});
$(function () { $( #collapseOne ).collapse( hide )});
</script>
Events
The following table psts a few events that can be used with the collapse functionapty.
| Event | Description | Example |
|---|---|---|
| show.bs.collapse | Fired after the show method is called. |
$( #identifier ).on( show.bs.collapse , function () {
// do something
})
|
| shown.bs.collapse | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
$( #identifier ).on( shown.bs.collapse , function () {
// do something
})
|
| hide.bs.collapse | Fired when the hide instance method has been called. |
$( #identifier ).on( hide.bs.collapse , function () {
// do something
})
|
| hidden.bs.collapse | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
$( #identifier ).on( hidden.bs.collapse , function () {
// do something
})
|
Example
The following example demonstrates the usage of events −
<span class = "panel-group" id = "accordion">
<span class = "panel panel-info">
<span class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
Cpck me to expand. Cpck me again to collapse. Section --shown event
</a>
</h4>
</span>
<span id = "collapseexample" class = "panel-collapse collapse">
<span class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</span>
</span>
</span>
</span>
<script type = "text/javascript">
$(function () {
$( #collapseexample ).on( show.bs.collapse , function () {
alert( Hey, this alert shows up when you expand it );
})
});
</script>
Advertisements