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:
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:
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:
Panel BodyPanel 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
- 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
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