Download - _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse
![Page 1: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/1.jpg)
Collapse
JogeshK.Muppala
![Page 2: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/2.jpg)
TheCollapsePlugin• Collapsepluginprovidesaquickwayofrevealingandhidingcontent.
• Togglingofcontentrequirestheuseofabu?onoralinktotriggerthetoggle
2
![Page 3: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/3.jpg)
CollapseSimpleExample<divclass="col-md-5col-md-offset-1">
<divclass="collapsein"id="collapseExample"> <divclass="well"> <h3>SomeCollapsibleContent</h3> <p>Thisissomecollapsiblecontentthatwillbetoggled withthebu?onontheright</p> </div>
</div></div><divclass="col-md-3">
<aclass="btnbtn-primary"role="bu?on"data-toggle="collapse"href="#collapseExample"aria-expanded="false"aria-controls="collapseExample"> ToggleInfo</a>
</div>
3
![Page 4: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/4.jpg)
ReturningtotheNavigaSonBar
4
![Page 5: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/5.jpg)
ResponsiveNavigaSonBar
<divclass="navbar-header"><bu?ontype="bu?on"class="navbar-togglecollapsed"
data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">TogglenavigaSon</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></bu?on>
...</div><divid="navbar"class="navbar-collapsecollapse"><ulclass="navnavbar-nav”>...</ul></div></div></nav>
5
![Page 6: _4f8a6830e7790c58a07292e1f0eb00b5_3-Collapse](https://reader031.vdocuments.mx/reader031/viewer/2022020518/577c827a1a28abe054b0ef67/html5/thumbnails/6.jpg)
Accordion<divclass="panel-group"id="accordion”role="tablist”>
<divclass="panelpanel-default"> <divclass="panel-heading"role="tab"id="headingPeter"> <h3class="panel-Stle"> <arole="bu?on"data-toggle="collapse" data-parent="#accordion"href="#peter”> PeterPan <small>ChiefEpicuriousOfficer</small></a> </h3> </div> <divrole="tabpanel"class="panel-collapsecollapsein”id="peter”> <divclass="panel-body"> ... </div> </div></div>
...</div>
6