_content: add toggle to display other ports on download page

Fixes golang/go#59317.

Change-Id: I1fd8020838f519b3a481745a979a0253458e4257
Reviewed-on: https://go-review.googlesource.com/c/website/+/486555
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Auto-Submit: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>

_content/css/styles.css

@@ -5071,7 +5071,27 @@ table.downloadtable tr {
   background-color: var(--color-background);
   border: 2px solid var(--color-background-accented);
 }
-
+table.downloadtable tr.first[aria-expanded] {
+  cursor: pointer;
+}
+table.downloadtable tr.first[aria-expanded] th::after {
+  content: "⌵";
+  display: inline-block;
+  padding: 0 0.5rem;
+  transform: rotate(180deg);
+  vertical-align: sub;
+}
+table.downloadtable tr.first[aria-expanded="true"] th::after {
+  bottom: 0.3125rem;
+  position: relative;
+  transform: rotate(0);
+}
+table.downloadtable tr.first[aria-expanded="false"] ~ tr.secondary {
+  display: none;
+}
+table.downloadtable tr.first[aria-expanded="true"] ~ tr.secondary {
+  display: table-row;
+}
 table.downloadtable tr.first th {
   text-align: left;
   font-style: normal;

_content/dl.tmpl

@@ -73,16 +73,16 @@ information about Go releases.
 <div class="toggle{{if .Visible}}Visible{{end}}" id="{{.Version}}">
 	<div class="collapsed">
 		<h3 class="toggleButton" title="Click to show downloads for this version">
+    <span>{{.Version}}</span>
     <img class="toggleButton-img" src="/images/icons/arrow-down.svg" width="18" height="18" aria-hidden="true" />
     <img class="toggleButton-img toggleButton-img-dark" src="/images/icons/arrow-down-dark.svg" width="18" height="18" aria-hidden="true" />
-    <span>{{.Version}}</span>
     </h3>
 	</div>
 	<div class="expanded">
 		<h3 class="toggleButton" title="Click to hide downloads for this version">
+    <span>{{.Version}}</span>
     <img class="toggleButton-img" src="/images/icons/arrow-down.svg" width="18" height="18" aria-hidden="true" />
     <img class="toggleButton-img toggleButton-img-dark" src="/images/icons/arrow-down-dark.svg" width="18" height="18" aria-hidden="true" />
-    <span>{{.Version}}</span>
     </h3>
 		{{if .Stable}}{{else}}
 			<p>This is an <b>unstable</b> version of Go. Use with caution.</p>
@@ -115,7 +115,7 @@ go install golang.org/dl/{{.Version}}@latest
   {{range .Files}}{{if .PrimaryPort}}{{template "download-file" .}}{{end}}{{end}}
 
   {{/* TODO(cbro): add a link to an explanatory doc page */}}
-  <tr class="first"><th colspan="6" class="first">Other Ports</th></tr>
+  <tr class="first js-togglePorts" aria-expanded="false"><th colspan="6" class="first">Other Ports</th></tr>
   {{range .Files}}{{if not .PrimaryPort}}{{template "download-file" .}}{{end}}{{end}}
 {{else}}
   {{range .Files}}{{template "download-file" .}}{{end}}
@@ -124,7 +124,7 @@ go install golang.org/dl/{{.Version}}@latest
 {{end}}
 
 {{define "download-file"}}
-<tr{{if .Highlight}} class="highlight"{{end}}>
+<tr class="{{if .Highlight}}highlight{{end}} {{if not .PrimaryPort}}secondary{{end}}">
   <td class="filename"><a class="download" href="{{.URL}}">{{.Filename}}</a></td>
   <td>{{.PrettyKind}}</td>
   <td>{{.PrettyOS}}</td>

_content/js/site.js

@@ -235,6 +235,14 @@ window.initFuncs = [];
     }
   }
 
+  function registerPortToggles() {
+    for (const el of document.querySelectorAll('.js-togglePorts')) {
+      el.addEventListener('click', () => {
+        el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')
+      })
+    }
+  }
+
   /**
    * Retrieves list of Go versions & returns the latest
    */
@@ -319,5 +327,6 @@ window.initFuncs = [];
     setDownloadLinks();
     setThemeButtons();
     setVersionSpans();
+    registerPortToggles();
   });
 })();