<h2 id="pagination-default">Default pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
- <div class="bs-example">
+ <div class="bs-example" data-example-id="simple-pagination">
<nav>
<ul class="pagination">
- <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li>
+ <a href="#">
+ <span aria-hidden="true">«</span>
+ <span class="sr-only">Previous</span>
+ </a>
+ </li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
</div>
- <h2 id="collapse-examples">Example accordion</h2>
- <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
+ <h2 id="collapse-example">Example</h2>
+ <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">
+ <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 with data-target
+ </button>
+ </p>
+ <div class="collapse" id="collapseExample">
+ <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.
+ </div>
+ </div>
+ </div>
+{% 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 with data-target
+</button>
+<div class="collapse" id="collapseExample">
+ <div class="well">
+ ...
+ </div>
+</div>
+{% endhighlight %}
+
+ <h2 id="collapse-example-accordion">Accordion example</h2>
+ <p>Extend the default collapse behavior to create an accordion with the panel component.</p>
- <div class="bs-example">
+ <div class="bs-example" data-example-id="collapse-accordion">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">