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

Here’s the sample code for a basic collapsible element

Collapsible

    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

The post Bootstrap Collapsible appeared first on Ebhor.com.