_4f8a6830e7790c58a07292e1f0eb00b5_3-collapse
DESCRIPTION
gTRANSCRIPT
Collapse
JogeshK.Muppala
TheCollapsePlugin• Collapsepluginprovidesaquickwayofrevealingandhidingcontent.
• Togglingofcontentrequirestheuseofabu?onoralinktotriggerthetoggle
2
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
ReturningtotheNavigaSonBar
4
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
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