Bootstrap Collapsible

Bootstrap Basic Collapsible

Bootstrap Collapsibles can be used to hide/show large amount of content.

Here’s the sample code for a basic collapsible element

 



    Bootstrap Collapsible Demo

Here, the .collapse class is the basic contextual class for the collapsible element.

You can use this class with elements like <div>; thus, the content can be hidden or made visible for that specific <div> by just clicking a button.

The data-toggle="collapse" attribute is used with the button element for controlling the collapsible content.

The connection between the collapsible element and the button is indicated using the data-target="#id".

If you’re using an <a> element, the href attribute can replace the data-target attribute.

Observe the below code for the illustration:

 
Collapsible



     Bootstrap Collapsible Demo

The collapsible content is always hidden by default.

However, if you want it to be shown by default, you can use the .in class

 


    Bootstrap Collapsible Demo

Bootstrap Collapsible panel

Bootstrap has a provision for collapsible panel as well. Following code will illustrate the same: 

 


    

        

            

        Collapsible panel
      

        

        

            
Panel Body

            
Panel Footer

Bootstrap Collapsible List Group

You can also create a collapsible list group using following code: 

 


    

        

            

        Collapsible list group
      

        

        

            
    
                
  • One
    • 
                
  • Two
    • 
                
  • Three
    • 
            

            
Footer

Bootstrap Accordion

Accordion is a special extension of collapsible component where you can group multiple panels to be individually collapsible.

You need to specify a parent for these collapsible elements using data-parent so that at a time at most one element is visible.

Here’s the code for illustrating the accordion feature:

 


    

        

            

        
        Collapsible Group 1
      

        

        

            
Here is an example for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect

        

    

    

        

            

        
        Collapsible Group 2
      

        

        

            
Here is another collapsible panel for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect

        

    

    

        

            

        
        Collapsible Group 3
      

        

        

            
This is another collapsible panel for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect

Bootstrap Collapse Event

Here’s a list of collapse events:

  • bs.collapse
  • bs.collapse
  • bs.collapse
  • bs.collapse