Search within TutorialsPark

Twitter Bootstrap Collapsible Accordion


Use this plugin to create collapsible accordion within your webpage


Twitter Bootstrap: Collapsible Accordion

1. The collapse plugin is used to make collapsing division within a webpage.It can be used to build accordion navigation, content boxes etc.

2. In the below code, the class .collapse is used to hide content.

3. class .collapse.in is used to show the content.

3. and class .collapsing gets added when the transition starts and is removed when the transition is finished.

Example: Twitter Bootstrap Collapsible Accordion

Give it a TRY! »

Twitter Bootstrap: Collapse accordion using Data Attributes

1. Add data-toggle="collapse" and data-target to element to assign control of a collapsible element automatically.

2. Use class .collapse for a collapsible element, to have it open by default, append it with .in.

3. To create a accordion-like group, add the data attribute data-parent="#selector".

Example:Twitter Bootstrap Collapse accordion using Data Attributes

Give it a TRY! »

Twitter Bootstrap: Collapsible Accordion using Javascript

1. The collapse method can be activated manually using Javascript method $('selector')collapse..

Example:Twitter Bootstrap Collapsible Accordion using Javascript.

Give it a TRY! »

Twitter Bootstrap: Collapse Options

Options are used to activate your content as collapsible elements. It accepts an optional options object.

Table:Twitter Bootstrap Collapsible Options

Name Type Default Description
parent selector false If the value is selector, then all collapsible elements within the specified parent will get closed when this collapsible item is shown
toggle boolean true To toggle the collapsible element when toggled

Twitter Bootstrap: Bootstrap Collapse using Javascript method - .collapse('toggle')


1.The Javascript method .collapse('toggle') is used to toggle a collapsible element to show or hide.

Example:Twitter Bootstrap Methods Using Javascript

Give it a TRY! »

Twitter Bootstrap: Bootstrap Collapse using Javascript method - .collapse('show')


1.The Javascript method .collapse('show') is used to show a collapsible element.

Example:Twitter Bootstrap Methods Using Javascript

Give it a TRY! »

Twitter Bootstrap: Bootstrap Collapse using Javascript method - .collapse('hide')


1.The Javascript method .collapse('hide') is used to hide a collapsible element.

Example:Twitter Bootstrap Methods Using Javascript

Give it a TRY! »

Twitter Bootstrap: Collapsible Accordion Events

Table: Events table

Event Type Description
show.bs.collapse The event is fired immediately when the show instance method is invoked.
shown.bs.collapse The event is fired when the collapse element is made visible for the user
hide.bs.collapse The event is fired when the method hide is called
hidden.bs.collapse The event is fired when the collapse element has been hidden from the user

1.The Bootstrap's collapse class has a four events which are fired based on collapse functionality .

Example:Twitter Bootstrap Collapsible Accordion events

Give it a TRY! »