markdownify tabs

docs/javascript/tabs.md

@@ -3,12 +3,11 @@ layout: page
 title: Tabs
 ---
 
-<div class="bs-docs-section">
-  <h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1>
+## Example
 
-  <h2 id="tabs-examples">Example tabs</h2>
-  <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
-  <div class="bs-example bs-example-tabs">
+Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
+
+<div class="bs-example bs-example-tabs">
   <ul id="myTab" class="nav nav-tabs" role="tablist">
     <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
     <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
@@ -34,16 +33,16 @@ title: Tabs
       <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
     </div>
   </div>
-  </div><!-- /example -->
+</div>
 
-  <div class="bs-callout bs-callout-info">
+<div class="bs-callout bs-callout-info">
   <h4>Extends tabbed navigation</h4>
   <p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
-  </div>
+</div>
 
+## Usage
 
-  <h2 id="tabs-usage">Usage</h2>
-  <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
+Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 {% highlight js %}
 $('#myTab a').click(function (e) {
@@ -52,7 +51,7 @@ $('#myTab a').click(function (e) {
 })
 {% endhighlight %}
 
-  <p>You can activate individual tabs in several ways:</p>
+You can activate individual tabs in several ways:
 
 {% highlight js %}
 $('#myTab a[href="#profile"]').tab('show') // Select tab by name
@@ -61,8 +60,10 @@ $('#myTab a:last').tab('show') // Select last tab
 $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}
 
-  <h3>Markup</h3>
-  <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
+### Markup
+
+You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
+
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
@@ -81,8 +82,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 </div>
 {% endhighlight %}
 
-  <h3>Fade effect</h3>
-  <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
+### Fade effect
+
+To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in to properly fade in initial content.
+
 {% highlight html %}
 <div class="tab-content">
   <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
@@ -92,11 +95,12 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 </div>
 {% endhighlight %}
 
-  <h3>Methods</h3>
-  <h4>$().tab</h4>
-  <p>
-    Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
-  </p>
+### Methods
+
+#### $().tab
+
+Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
   <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
@@ -119,8 +123,9 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 </script>
 {% endhighlight %}
 
-  <h3>Events</h3>
-  <div class="table-responsive">
+### Events
+
+<div class="table-responsive">
   <table class="table table-bordered table-striped">
     <thead>
      <tr>
@@ -139,11 +144,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
      </tr>
     </tbody>
   </table>
-  </div><!-- /.table-responsive -->
+</div>
+
 {% highlight js %}
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })
 {% endhighlight %}
-</div>