Scribd
Upload
20 views13 pages

COLLAPSE

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views13 pages

COLLAPSE

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

COLLAPSE

Sample Collapse
• Collapsibles are useful when you want to hide
and show large amount of content:
• Example:
<button data-toggle="collapse" data-
target="#demo">Collapsible</button>

<div id="demo" class="collapse">text....


</div>
Example Explained

• The .collapse class indicates a collapsible element (a


<div> in our example); this is the content that will be
shown or hidden with a click of a button.
• To control (show/hide) the collapsible content, add
the data-toggle="collapse" attribute to an <a> or a
<button> element. Then add the data-
target="#id" attribute to connect the button with the
collapsible content (<div id="demo">).
• Note: For <a> elements, you can use
the href attribute instead of the data-target attribute:
• <a href="#demo" data-
toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">


Lorem ipsum dolor text....
</div>
• By default, the collapsible content is hidden.
However, you can add the .in class to show the
content by default:
• <div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Collapsible Panel
• <div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible
panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Collapsible List Group
• <div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Accordion

• Refer Example Html file

You might also like