From 98fddaa3557b1c872f1e585d579ec7e5e989e95d Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Fri, 25 Nov 2011 17:23:14 -0800
Subject: new plugin "collapse" for collapsible lists and "accordion" like
 support

---
 docs/javascript.html | 155 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 134 insertions(+), 21 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index f625e2323..fae103856 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -37,6 +37,7 @@
     <script src="../js/bootstrap-twipsy.js"></script>
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-buttons.js"></script>
+    <script src="../js/bootstrap-collapse.js"></script>
     <script>
       $(function () {
         // twipsy demo
@@ -141,6 +142,10 @@
               <td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td>
               <td>This plugin offers additional functionality for managing button state.</td>
             </tr>
+            <tr>
+              <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
+              <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
+            </tr>
          </tbody>
        </table>
        <h3>Is javascript necessary?</h3>
@@ -166,7 +171,7 @@
         </div>
         <div class="span9 columns">
           <h3>Using bootstrap-modal</h3>
-          <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
+          <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
           <h3>Options</h3>
           <table class="striped-table">
             <thead>
@@ -208,18 +213,18 @@
           <h4>.modal(options)</h4>
           <p>Activates your content as a modal. Accepts an optional options <code>object</code>.
 <pre class="prettyprint linenums">
-$('#my-modal').modal({
+$('#myModal').modal({
   keyboard: false
 })</pre>
           <h4>.modal('toggle')</h4>
           <p>Manually toggles a modal.</p>
-          <pre class="prettyprint linenums">$('#my-modal').modal('toggle')</pre>
+          <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
           <h4>.modal('show')</h4>
           <p>Manually opens a modal.</p>
-          <pre class="prettyprint linenums">$('#my-modal').modal('show')</pre>
+          <pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
           <h4>.modal('hide')</h4>
           <p>Manually hides a modal.</p>
-          <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre>
+          <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
           <table class="striped-table">
@@ -250,7 +255,7 @@ $('#my-modal').modal({
           </table>
 
 <pre class="prettyprint linenums">
-$('#my-modal').bind('hidden', function () {
+$('#myModal').bind('hidden', function () {
   // do something ...
 })</pre>
           <h3>Demo</h3>
@@ -504,7 +509,7 @@ $('.tabs a').bind('change', function (e) {
               </ul>
             </li>
           </ul>
-          <div id="my-tab-content" class="tab-content">
+          <div id="myTabContent" class="tab-content">
             <div class="active tab-pane" id="home">
               <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
             </div>
@@ -851,39 +856,147 @@ $('.tabs a').bind('change', function (e) {
     </section>
 
 
-    <!-- Collapsible
+    <!-- Collapse
     ================================================== -->
 
-    <section id="collapsible">
+    <section id="collapse">
       <div class="page-header">
-        <h1>Collapsible <small>bootstrap-collapsible.js</small></h1>
+        <h1>collapse <small>bootstrap-collapse.js</small></h1>
       </div>
       <div class="row">
         <div class="span3 columns">
-          <p>collapsible collapsible collapsible bitches.</p>
+          <p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</p>
           <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span9 columns">
-          <h3>Using bootstrap-collapsible.js</h3>
-          <pre class="prettyprint linenums">$(".collapsible").collapsible()</pre>
+          <h3>Using bootstrap-collapse.js</h3>
+          <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
+          <h3>Options</h3>
+          <table class="striped-table">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 50px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>parent</td>
+               <td>selector</td>
+               <td>false</td>
+               <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
+             </tr>
+             <tr>
+               <td>toggle</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>Toggles the collapsible element on invocation</td>
+             </tr>
+            </tbody>
+          </table>
           <h3>Markup</h3>
-          <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
-          <pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
+          <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
+          <pre class="prettyprint linenums">
+&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
+  simple collapsible
+&lt;/button&gt;
+
+&lt;div id="demo" class="collapse height in"&gt; … &lt;/div&gt;</pre>
+         <p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
           <h3>Methods</h3>
+          <h4>.collapse(options)</h4>
+          <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+<pre class="prettyprint linenums">
+$('#myCollapsible').collapse({
+  toggle: false
+})</pre>
+          <h4>.collapse('toggle')</h4>
+          <p>Toggles a collapsible element to shown or hidden.</p>
+          <h4>.collapse('show')</h4>
+          <p>Shows a collapsible element.</p>
+          <h4>.collapse('hide')</h4>
+          <p>Hides a collapsible element.</p>
+          <h3>Events</h3>
+          <p>
+            Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+          </p>
+          <table class="striped-table">
+            <thead>
+             <tr>
+               <th style="width: 150px;">Event</th>
+               <th>Description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>show</td>
+               <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+             </tr>
+             <tr>
+               <td>shown</td>
+               <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
+             </tr>
+             <tr>
+               <td>hide</td>
+               <td>
+                This event is fired immediately when the <code>hide</code> method has been called.
+               </td>
+             </tr>
+             <tr>
+               <td>hidden</td>
+               <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
+             </tr>
+            </tbody>
+          </table>
 
+<pre class="prettyprint linenums">
+$('#myCollapsible').bind('hidden', function () {
+  // do something ...
+})</pre>
           <h3>Demo</h3>
 
-          <button data-toggle="collapse"></butotn>
-          <div>
-
-          </div>
-
+            <!-- single collapse -->
+            <p>
+              <button class="btn danger" data-toggle="collapse" data-target="#collapseDemoWrap">
+                simple collapsible
+              </button>
+            </p>
 
+            <div id="collapseDemoWrap" class="collapse height">
+              <!-- group collapse -->
+              <dl id="accordion" >
+                <dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
+                  <a href="#">Collapsible Group Item #1</a>
+                </dt>
+                <dd id="collapseOne" class="collapse height">
+                  <p>
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                  </p>
+                </dd>
+                <dt data-toggle="collapse"  data-target="#collapseTwo" data-parent="#accordion" >
+                  <a href="#">Collapsible Group Item #2</a>
+                </dt>
+                <dd id="collapseTwo"  class="collapse height">
+                  <p>
+                  Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.
+                  </p>
+                </dd>
+                <dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" >
+                  <a href="#">Collapsible Group Item #3</a>
+                </dt>
+                <dd id="collapseThree"  class="collapse height">
+                  <p>
+                  Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.
+                  </p>
+                </dd>
+              </dl>
+            </div>
         </div>
       </div>
     </section>
 
-
       <!-- Footer
       ================================================== -->
       <footer class="footer">
-- 
cgit v1.2.3