tabs can operate without JS

_includes/alt-details.html

@@ -1,5 +1,5 @@
 <div id="{{include.id}}" class="alt-details">
-  <input class="alt-details-control" type="checkbox" id="{{include.id}}__control">
+  <input class="alt-details-control" type="checkbox" id="{{include.id}}__control" hidden aria-hidden="true">
   <label class="alt-details-toggle" for="{{include.id}}__control">{{include.title}}</label>
   <div class="alt-details-detail">
     {{include.detail}}

_includes/tabsection.html

@@ -1,15 +1,27 @@
-<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
-  <ul class="nav-tab">
+<div id="{{include.id}}" class="tabsection">
+  {% for tabRoot in include.collection %}
+  <input
+    type="radio"
+    name="{{include.id}}_tabs"
+    id="{{tabRoot.tabId}}_description"
+    data-target="{{tabRoot.tabId}}"
+    hidden
+    aria-hidden="true"
+    {% if tabRoot.defaultTab %}checked{% endif %}
+  >
+  {% endfor %}
+  <ul hidden aria-hidden="true" class="nav-tab">
     {% for tabRoot in include.collection %}
     <li class="item-tab">
-      <a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
-         data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
+      <label class="item-tab-link" for="{{tabRoot.tabId}}_description">{{tabRoot.tabLabel}}</label>
     </li>
     {% endfor %}
   </ul>
-  {% for tabRoot in include.collection %}
-  <div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
-    {{tabRoot.content}}
+  <div class="tabcontent">
+    {% for tabRoot in include.collection %}
+    <section id="{{tabRoot.tabId}}_content">
+      {{tabRoot.content}}
+    </section>
+    {% endfor %}
   </div>
-  {% endfor %}
 </div>

_install_tabs/4-other.html

@@ -6,7 +6,7 @@
 <div class="text-step wrap-inline">
   <div class="wrap">
     <noscript>
-      <p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
+      <p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
     </noscript>
     <p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation" target="_blank">how to install and run <code>cs setup</code></a>.</p>
   </div>

_sass/components/alt-details.scss

@@ -41,12 +41,14 @@
 
     .alt-details-control + .alt-details-toggle + .alt-details-detail {
         // by default, hide the details
-        display: none;
+        position: absolute;
+        top: -999em;
+        left: -999em;
     }
 
     .alt-details-control:checked + .alt-details-toggle + .alt-details-detail {
         // show the details when the control is checked
-        display: block;
+        position: static;
     }
 
     .alt-details-control:checked + .alt-details-toggle:after {

_sass/components/tab.scss

@@ -2,13 +2,16 @@
 //------------------------------------------------
 //------------------------------------------------
 
+// dynamic tab switching based on https: //levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8
+
 .nav-tab {
     border-bottom: $base-border-gray;
     @include display(flex);
     @include align-items(center);
     @include justify-content(flex-start);
 
     .item-tab {
+        label,
         a {
             transition: none; // do not animate the transition to active
             color: $base-font-color-light;
@@ -26,19 +29,21 @@
             &:hover {
                 cursor: pointer;
             }
-
-            &.active {
-                border-bottom: 2px solid $brand-primary;
-                padding: 0 20px 8px; // so text does not jump up when active
-                color: $brand-primary;
-                pointer-events: none;
-            }
         }
 
+        label {
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
     }
     @include bp(small) {
         @include justify-content(space-between);
         .item-tab {
+            label,
             a {
                 transition: none; // do not animate the transition to active
                 padding: 0 10px 10px;
@@ -48,17 +53,51 @@
     }
 }
 
+.nav-tab>.item-tab>a.active, // used in the blog
+.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
+.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
+.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label,
+.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label,
+.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label,
+.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label,
+.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label,
+.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label,
+.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label {
+    border-bottom: 2px solid $brand-primary;
+    padding: 0 20px 8px; // so text does not jump up when active
+    color: $brand-primary;
+    pointer-events: none;
+}
+
 .tabsection {
     border-bottom: $base-border-gray;
     border-left: $base-border-gray;
     border-right: $base-border-gray;
     border-radius: $border-radius-medium;
-}
 
-.tabcontent {
-    display: none;
+    input { // hide the input because they are not interactive
+        display: block; /* "enable" hidden elements in IE/edge */
+        position: absolute; /* then hide them off-screen */
+        left: -100%;
+    }
 
-    &.active {
-        display: block;
+    .tabcontent {
+        section { // by default, hide all sections until the user clicks on the associated label
+            position: absolute;
+            top: -999em;
+            left: -999em;
+        }
     }
 }
+
+.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1),
+.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2),
+.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3),
+.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4),
+.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5),
+.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6),
+.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7),
+.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8),
+.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) {
+    position: static;
+}

_sass/layout/inner-main.scss

@@ -2,14 +2,14 @@
 //------------------------------------------------
 //------------------------------------------------
 
+#inner-main > section:nth-child(2) { // corresponds to area with the content below the title
+    margin-top: -80px; // have it overlap with the title area
+}
+
 #inner-main {
     background: $gray-lighter;
     padding-bottom: $padding-xlarge;
 
-    section:nth-child(2) {
-        margin-top: -80px;
-    }
-
     .inner-box {
         padding: $padding-medium;
         background: #fff;

resources/js/functions.js

@@ -312,42 +312,14 @@ $(document).ready(function () {
   }
 });
 
-$(document).ready(function () {
-  $('.tabsection').each(function () {
-    var tabsection = this;
-    $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
-      var tabLink = this;
-      var targetTab = $(tabLink).attr('data-target');
-      $(tabLink).click(function () {
-        console.log("clicked on " + targetTab);
-        $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function() {
-          var otherTab = this;
-          var otherTarget = $(otherTab).attr('data-target');
-          otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active');
-        })
-        $(tabsection).children('.tabcontent').each(function() {
-          var tabContent = this;
-          var tabId = $(tabContent).attr('data-tab');
-          targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active');
-        });
-      });
-    });
-  });
-});
-
 $(document).ready(function () {
   // click the get-started tab corresponding to the users OS.
   if ($(".main-download").length) {
     var os = getOS();
     if (os === 'unix') {
       os = 'linux';
     }
-    $("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () {
-      var targetTab = $(this).attr("data-target");
-      if (targetTab === os) {
-        $(this).click();
-      }
-    });
+    $("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true);
   }
 });