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



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

Panel Body
Panel Body

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

  • One
  • Two
  • Three

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

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.
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.
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

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.