rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

clarify collapse example with link and button triggers; also mention classes

Browse Source
This commit is contained in:
Mark Otto 2014-11-30 17:10:13 -08:00
parent e6fc081c91
commit 88ec5152da
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/_includes/js/collapse.html
View File

@ -1,8 +1,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="collapse" class="page-header">Collapse <small>collapse.js</small></h1> <h1 id="collapse" class="page-header">Collapse <small>collapse.js</small></h1>
<h3>About</h3> <p class="lead">Flexible plugin that utilizes a handful of classes for easy toggle behavior.</p>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<div class="bs-callout bs-callout-danger" id="callout-collapse-dependency"> <div class="bs-callout bs-callout-danger" id="callout-collapse-dependency">
<h4>Plugin dependency</h4> <h4>Plugin dependency</h4>
@ -10,12 +9,23 @@
</div> </div>
<h2 id="collapse-example">Example</h2> <h2 id="collapse-example">Example</h2>
<p>Click the button below to show and hide another element.</p> <p>Click the buttons below to show and hide another element via class changes:</p>
<ul>
<li><code>.collapse</code> hides content</li>
<li><code>.collapsing</code> is applied during transitions</li>
<li><code>.collapse.in</code> shows content</li>
</ul>
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</p>
<div class="bs-example"> <div class="bs-example">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle hidden content Button with data-target
</button> </button>
</p>
<div class="collapse" id="collapseExample"> <div class="collapse" id="collapseExample">
<div class="well"> <div class="well">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
@ -23,8 +33,11 @@
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle hidden content Button with data-target
</button> </button>
<div class="collapse" id="collapseExample"> <div class="collapse" id="collapseExample">
<div class="well"> <div class="well">
@ -34,7 +47,7 @@
{% endhighlight %} {% endhighlight %}
<h2 id="collapse-example-accordion">Accordion example</h2> <h2 id="collapse-example-accordion">Accordion example</h2>
<p>You can extend the collapse plugin with the panel component to create an accordion.</p> <p>Extend the default collapse behavior to create an accordion with the panel component.</p>
<div class="bs-example"> <div class="bs-example">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">