markdownify js dropdowns

docs/javascript/dropdowns.md

@@ -3,14 +3,11 @@ layout: page
 title: Dropdowns
 ---
 
-<div class="bs-docs-section">
-  <h1 id="dropdowns" class="page-header">Dropdowns <small>dropdown.js</small></h1>
+Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
 
-  <h2 id="dropdowns-examples">Examples</h2>
-  <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
+### Within navbars
 
-  <h3>Within a navbar</h3>
-  <div class="bs-example">
+<div class="bs-example">
   <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
     <div class="container-fluid">
       <div class="navbar-header">
@@ -66,10 +63,11 @@ title: Dropdowns
       </div><!-- /.nav-collapse -->
     </div><!-- /.container-fluid -->
   </nav> <!-- /navbar-example -->
-  </div> <!-- /example -->
+</div> <!-- /example -->
 
-  <h3>Within pills</h3>
-  <div class="bs-example">
+### Within pills
+
+<div class="bs-example">
   <ul class="nav nav-pills" role="tablist">
     <li role="presentation" class="active"><a href="#">Regular link</a></li>
     <li role="presentation" class="dropdown">
@@ -108,17 +106,21 @@ title: Dropdowns
         <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
       </ul>
     </li>
-    </ul> <!-- /pills -->
-  </div> <!-- /example -->
+  </ul>
+</div>
+
+## Usage
+
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
+
+On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
 
+Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
 
-  <h2 id="dropdowns-usage">Usage</h2>
-  <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
-  <p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
-  <p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
+### Via data attributes
+
+Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
 
-  <h3>Via data attributes</h3>
-  <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
 {% highlight html %}
 <div class="dropdown">
   <button id="dLabel" type="button" data-toggle="dropdown">
@@ -130,7 +132,9 @@ title: Dropdowns
   </ul>
 </div>
 {% endhighlight %}
-  <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
+
+To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
+
 {% highlight html %}
 <div class="dropdown">
   <a id="dLabel" data-target="#" href="http://example.com" type="button" data-toggle="dropdown">
@@ -144,26 +148,34 @@ title: Dropdowns
 </div>
 {% endhighlight %}
 
-  <h3>Via JavaScript</h3>
-  <p>Call the dropdowns via JavaScript:</p>
+### Via JavaScript
+
+Call the dropdowns via JavaScript:
+
 {% highlight js %}
 $('.dropdown-toggle').dropdown()
 {% endhighlight %}
-  <div class="bs-callout bs-callout-info">
+
+<div class="bs-callout bs-callout-info">
   <h4><code>data-toggle="dropdown"</code> still required</h4>
   <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
-  </div>
+</div>
+
+### Options
+
+*None.*
+
+### Methods
 
-  <h3>Options</h3>
-  <p><em>None</em></p>
+#### $().dropdown('toggle')
 
-  <h3>Methods</h3>
-  <h4>$().dropdown('toggle')</h4>
-  <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
+Toggles the dropdown menu of a given navbar or tabbed navigation.
 
-  <h3>Events</h3>
-  <p>All dropdown events are fired at the <code>.dropdown-menu</code>'s parent element.</p>
-  <div class="table-responsive">
+### Events
+
+All dropdown events are fired at the `.dropdown-menu`'s parent element.
+
+<div class="table-responsive">
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -190,10 +202,10 @@ $('.dropdown-toggle').dropdown()
       </tr>
     </tbody>
   </table>
-  </div><!-- ./bs-table-responsive -->
+</div>
+
 {% highlight js %}
 $('#myDropdown').on('show.bs.dropdown', function () {
   // do something…
 })
 {% endhighlight %}
-</div>