alt-details does not need javascript (#1381)

Author: bishabosha

_includes/alt-details.html

@@ -1,5 +1,6 @@
-<div {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
-  <button class="alt-details-toggle">{{include.title}}</button>
+<div id="{{include.id}}" class="alt-details">
+  <input class="alt-details-control" type="checkbox" id="{{include.id}}__control">
+  <label class="alt-details-toggle" for="{{include.id}}__control">{{include.title}}</label>
   <div class="alt-details-detail">
     {{include.detail}}
   </div>

_install_tabs/1-macos.html

@@ -13,6 +13,7 @@
     </div>
     {% endcapture %}
     {% include alt-details.html
+      id='cs-setup-macos-nobrew'
       title=homebrewAlt
       detail=homebrewDetail
     %}

_sass/components/alt-details.scss

@@ -4,8 +4,16 @@
 
 .alt-details {
 
+    .alt-details-control {
+        display: none;
+    }
+
     .alt-details-toggle {
         width: 100%;
+        display: block;
+        font-family: $base-font-family;
+        line-height: normal;
+        text-align: center;
         border: none;
         background-color: $brand-tertiary;
         padding: 5px 10px;
@@ -20,24 +28,39 @@
         }
 
         &:after {
-            content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
+            // show a right arrow at the end of the toggle element
+            content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
             font-family: "FontAwesome";
             font-weight: 900;
             font-size: 15px;
             float: right;
             margin-top: 2px;
         }
 
-        &.alt-details-closed:after {
-            content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
-        }
+    }
+
+    .alt-details-control + .alt-details-toggle + .alt-details-detail {
+        // by default, hide the details
+        display: none;
+    }
+
+    .alt-details-control:checked + .alt-details-toggle + .alt-details-detail {
+        // show the details when the control is checked
+        display: block;
+    }
+
+    .alt-details-control:checked + .alt-details-toggle:after {
+        // change the marker on the toggle label to a down arrow
+        content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
     }
 
     .alt-details-detail {
         // The detail box appears to be underneath the toggle button
         // so we add a padding to the top and push it up.
-        border: $base-border-gray;
-        padding-top: 15px;
-        margin-top: -15px;
+        border-bottom: $base-border-gray;
+        border-left: $base-border-gray;
+        border-right: $base-border-gray;
+        padding-top: 10px;
+        margin-top: -10px;
     }
 }

resources/js/functions.js

@@ -178,21 +178,6 @@ var toggleStickyToc = function() {
     }
 }
 
-$(document).ready(function() {
-  // for each .alt-details div, find the .alt-details-toggle button,
-  // and add a click handler to toggle the visibility of the .alt-details-detail
-
-  $('.alt-details').each(function() {
-    var toggle = $(this).find('.alt-details-toggle');
-    var details = $(this).find('.alt-details-detail');
-    toggle.click(function() {
-      details.css('display') === 'none' ? details.show() : details.hide();
-      toggle.toggleClass('alt-details-closed');
-    });
-    toggle.click();
-  });
-});
-
 // Blog search
 $(document).ready(function() {
   if ($("#blog-search-bar").length) {