Tutorial on Bootstrap 3 Collapse & Accordion

A collapse and accordion is a hide panel or portion which is opened on click on a button or link with scrolling effect. Now start to learn Bootstrap Collapse and Accordion.

Basic Collapse

to make a basic collapse in bootstrap 3 need to use data-toggle="collapse" and data-target="#collapse_demo" in a button or link where collapse_demo is the shoe hisde div and use classname .collapse on the show hide div

Ecample:

Try it yourself

Collapsible


Lorem ipsum dolor text....

By default the collapsible content is hidden. if you want to show the content of the collapsable div you can add .in class vlass name on the collapse div

Example:

Try it yourself

Lorem ipsum dolor text....

Collapsible Panel

A collapsible panel is collapsible portion with header footer and body where header and footer have a gray background and when the panel is collapse it shows only the panel heading . To make a panel group first take a div with class name .panel-group now inside that you can use multiple panel with panel type to make that use class name .panel .panel-default you can replace .panel-default with .panel-info or .panel-success etc tomake different header and footer color

Example:

Try it yourself

  
  

    

      

        Collapsible panel
      
    
    

      
Panel Body
      
Panel Footer
    
  

  

    

      

        Collapsible panel
      
    
    

      
Panel Body
      
Panel Footer
    
  

Collapsible List Group

A bootstrap 3 collapsible list group like bootstrap collapsible panel where inside panel body there is a ordered or unordered list.

Example

Try it yourself

  

    

      

        Collapsible list group
      
    
    

      

        
One
        
Two
        
Three
      
      
Footer
    
  

Bootstrap 3 Accordion

Bootstrap 3 Accordion are used on the websites to manage the big quantity of content and navigation lists. With Bootstrap collapse plugin you’ll be able to either produce accordion or a straightforward folding panel while not writing any JavaScript code.

Example

Try it yourself

  

    

      

        
        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
      
    
    

      
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 3
      
    
    

      
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.
    
  

In this post we have learned about Bootstrap Collapse and Accordion hope that it helped you and please provide your comment to make the site better.

Thanks for reading