refactor alerts + add new readme which idefientifies goals for 2.0 js

1 files changed, 38 insertions, 4 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index 28f5e3035..f5f0520c3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,7 +39,6 @@
     <script src="../js/bootstrap-buttons.js"></script>
     <script>
       $(function () {
-
         // twipsy demo
         $("a[rel=twipsy]").twipsy({
           live: true
@@ -200,9 +199,9 @@
             </tbody>
           </table>
           <h3>Markup</h3>
-          <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes.</p>
+          <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
 <pre class="prettyprint linenums">
-&lt;a class="btn" data-controls-modal="my-modal" data-backdrop="true" &gt;Launch Modal&lt;/a&gt;
+&lt;a class="btn" data-toggle="modal" data-target="my-modal" &gt;Launch Modal&lt;/a&gt;
 </pre>
           <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
           <h3>Methods</h3>
@@ -269,7 +268,9 @@ $('#my-modal').bind('hidden', function () {
               <a href="#" class="btn" data-modal-dismiss="true" >Close</a>
             </div>
           </div>
-          <button data-controls-modal="modal-from-dom" class="btn danger">Launch Modal</button>
+          <button data-toggle="modal" data-target="modal-from-dom" class="btn danger">
+            Launch Modal
+          </button>
         </div>
       </div>
     </section>
@@ -849,6 +850,39 @@ $('.tabs a').bind('change', function (e) {
     </section>
 
 
+    <!-- Collapsible
+    ================================================== -->
+
+    <section id="collapsible">
+      <div class="page-header">
+        <h1>Collapsible <small>bootstrap-collapsible.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span3 columns">
+          <p>collapsible collapsible collapsible bitches.</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>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>
+          <h3>Methods</h3>
+
+          <h3>Demo</h3>
+
+          <button data-toggle="collapse"></butotn>
+          <div>
+
+          </div>
+
+
+        </div>
+      </div>
+    </section>
+
+
       <!-- Footer
       ================================================== -->
       <footer class="footer">