Improve bootstrap tabs (docker#2546)

Use data-target instead of href
Move tab-syncing code into site-wide JS so everyone can use it
Add example for syncing tab groups on the same page

Author: Misty Stanley-Jones

README.md

@@ -251,8 +251,8 @@ references as you rename, add, and remove tabs.
 
 ```
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#tab1">TAB 1 HEADER</a></li>
-  <li><a data-toggle="tab" href="#tab2">TAB 2 HEADER</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
+  <li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
 </ul>
 <div class="tab-content">
   <div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>

compose/compose-file/index.md

@@ -37,7 +37,7 @@ tutorial](/engine/getstarted-voting-app/index.md).
 
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingThree">
-      <h4 class="panel-title" id="collapsible-group-item-3"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> Example Compose file version 3 </a> </h4>
+      <h4 class="panel-title" id="collapsible-group-item-3"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> Example Compose file version 3 </a> </h4>
     </div>
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree" aria-expanded="true">
       <div class="panel-body">

datacenter/dtr/2.2/guides/admin/configure/use-a-load-balancer.md

@@ -89,9 +89,9 @@ balance checks. Use `/health` instead for those kinds of checks.
 Use the following examples to configure your load balancer for DTR.
 
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#nginx" data-group="nginx">NGINX</a></li>
-  <li><a data-toggle="tab" href="#haproxy" data-group="haproxy">HAProxy</a></li>
-  <li><a data-toggle="tab" href="#aws">AWS LB</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#nginx" data-group="nginx">NGINX</a></li>
+  <li><a data-toggle="tab" data-target="#haproxy" data-group="haproxy">HAProxy</a></li>
+  <li><a data-toggle="tab" data-target="#aws">AWS LB</a></li>
 </ul>
 <div class="tab-content">
   <div id="nginx" class="tab-pane fade in active">
@@ -259,8 +259,8 @@ backend dtr_upstream_servers_443
 You can deploy your load balancer using:
 
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#nginx-2" data-group="nginx">NGINX</a></li>
-  <li><a data-toggle="tab" href="#haproxy-2" data-group="haproxy">HAProxy</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#nginx-2" data-group="nginx">NGINX</a></li>
+  <li><a data-toggle="tab" data-target="#haproxy-2" data-group="haproxy">HAProxy</a></li>
 </ul>
 <div class="tab-content">
   <div id="nginx-2" class="tab-pane fade in active">
@@ -302,17 +302,3 @@ docker run --detach \
 
 * [Backups and disaster recovery](../backups-and-disaster-recovery.md)
 * [DTR architecture](../../architecture.md)
-
-
-<script>
-// sync tabs for the same language, so you only have to click once.
-
-// jquery is only loaded at the footer, so we can't rely on it for the
-// page load event
-window.onload = function() {
-  $('.nav-tabs > li > a').click(function(e) {
-    var group = $(this).attr('data-group');
-    $('.nav-tabs > li > a[data-group="'+ group +'"]').tab('show');
-  })
-};
-</script>

engine/api/index.md

@@ -23,9 +23,9 @@ The API can be accessed with any HTTP client, but we also provide [SDKs](sdks.md
 As an example, the `docker run` command can be easily implemented in various programming languages and by hitting the API directly with `curl`:
 
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#python">Python</a></li>
-  <li><a data-toggle="tab" href="#go">Go</a></li>
-  <li><a data-toggle="tab" href="#curl">curl</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#python">Python</a></li>
+  <li><a data-toggle="tab" data-target="#go">Go</a></li>
+  <li><a data-toggle="tab" data-target="#curl">curl</a></li>
 </ul>
 <div class="tab-content">
   <div id="python" class="tab-pane fade in active">

js/docs.js

@@ -280,3 +280,12 @@ if($('.nav-sidebar ul a.active').length != 0)
       $(this).addClass('collapse in').siblings;
   });
 }
+
+// sync tabs with the same data-group
+
+window.onload = function() {
+  $('.nav-tabs > li > a').click(function(e) {
+    var group = $(this).attr('data-group');
+    $('.nav-tabs > li > a[data-group="'+ group +'"]').tab('show');
+  })
+};

test.md

@@ -232,22 +232,22 @@ You can nest captures within each other to represent more complex logic with Liq
 Here are some tabs:
 
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#tab1">TAB 1 HEADER</a></li>
-  <li><a data-toggle="tab" href="#tab2">TAB 2 HEADER</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
+  <li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
 </ul>
 <div class="tab-content">
   <div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>
   <div id="tab2" class="tab-pane fade">TAB 2 CONTENT</div>
 </div>
 
-You need to adjust the IDs and HREFs to match your use case.
+You need to adjust the `id` and `data-target` values to match your use case.
 
 If you have Markdown inside the content of the `<div>`, you need to capture it, then
 print it and run it through the `markdownify` Liquid filter. Here's a demo:
 
 <ul class="nav nav-tabs">
-  <li class="active"><a data-toggle="tab" href="#tab3">TAB 1 HEADER</a></li>
-  <li><a data-toggle="tab" href="#tab4">TAB 2 HEADER</a></li>
+  <li class="active"><a data-toggle="tab" data-target="#tab3">TAB 1 HEADER</a></li>
+  <li><a data-toggle="tab" data-target="#tab4">TAB 2 HEADER</a></li>
 </ul>
 <div class="tab-content">
 <div id="tab3" class="tab-pane fade in active">
@@ -270,6 +270,38 @@ print it and run it through the `markdownify` Liquid filter. Here's a demo:
 </div>
 </div>
 
+#### Synchronizing multiple tab groups
+
+Consider an example where you have something like one tab per language, and
+you have multiple tab sets like this on a page. You might want them to all
+toggle together. We have Javascript that loads on every page that lets you
+do this by setting the `data-group` attributes to be the same. Note that the
+`data-target` attributes still need to point to unique div IDs.
+
+In this example, selecting `Go` or `Python` in one tab set will toggle the
+other tab set to match.
+
+<ul class="nav nav-tabs">
+  <li class="active"><a data-toggle="tab" data-target="#go" data-group="go">Go</a></li>
+  <li><a data-toggle="tab" data-target="#python" data-group="python">Python</a></li>
+</ul>
+<div class="tab-content">
+  <div id="go" class="tab-pane fade in active">Go content here</div>
+  <div id="python" class="tab-pane fade in">Python content here</div>
+</div>
+
+And some content between the two sets, just for fun...
+
+<ul class="nav nav-tabs">
+  <li class="active"><a data-toggle="tab" data-target="#go-2" data-group="go">Go</a></li>
+  <li><a data-toggle="tab" data-target="#python-2" data-group="python">Python</a></li>
+</ul>
+<div class="tab-content">
+  <div id="go-2" class="tab-pane fade in active">Go content here</div>
+  <div id="python-2" class="tab-pane fade in">Python content here</div>
+</div>
+
+
 ### Cards
 
 In a Bootstrap row, your columns need to add up to 12. Here are three cards in