❮ Previous Next ❯
Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of content:
Click Me
Example
Collapsible
»
Example Explained
The .collapse class indicates a collapsible element (a
To control (show/hide) the collapsible content, add the data-toggle=”collapse” attribute to an or a element. Then add the data-target=”#id” attribute to connect the button with the collapsible content (
Note: For elements, you can use the href attribute instead of the data-target attribute:
Example
Collapsible
»
By default, the collapsible content is hidden. However, you can add the .in class to show the content by default:
Example
»
Collapsible Panel
Collapsible panel
The following example shows a collapsible panel:
Example
»
Collapsible List Group
Collapsible list group
The following shows a collapsible panel with a list group inside:
Example
»
Accordion
Collapsible Group 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Collapsible Group 2
Collapsible Group 3
The following example shows a simple accordion by extending the panel component.
Note: Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
Example
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
»
Complete Bootstrap Collapse Reference
For a complete reference of all collapse options, methods and events, go to our Bootstrap JS Collapse Reference.
❮ Previous Next ❯
shahzade bau 