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