diff --git a/content/static/css/unit_outline.css b/content/static/css/unit_outline.css
index 5a76b9f..4a6f40c 100644
--- a/content/static/css/unit_outline.css
+++ b/content/static/css/unit_outline.css
@@ -39,6 +39,9 @@
   height: 2.5rem;
   padding: 1rem;
 }
+a.UnitOutline-accordian--active {
+  background-color: var(--gray-9);
+}
 .UnitOutline-panel {
   padding: 0 18px;
   background-color: white;
diff --git a/content/static/html/helpers/_unit_outline.tmpl b/content/static/html/helpers/_unit_outline.tmpl
index 1fd0126..c1fcdba 100644
--- a/content/static/html/helpers/_unit_outline.tmpl
+++ b/content/static/html/helpers/_unit_outline.tmpl
@@ -12,10 +12,10 @@
   </div>
   <div class="UnitOutline">
     {{if .Readme.String}}
-      <a class="UnitOutline-accordian" href="?readme#readme-top">README</a>
+      <a class="UnitOutline-accordian js-accordian" href="?readme#readme-top">README</a>
     {{end}}
     {{if (or .DocOutline.String .Unit.IsPackage)}}
-      <a class="UnitOutline-accordian" href="#doc-top">Documentation</a>
+      <a class="UnitOutline-accordian js-accordian" href="#doc-top">Documentation</a>
       <div class="UnitOutline-panel">
         <div class="Documentation">
           {{.DocOutline}}
@@ -26,7 +26,7 @@
       <a class="UnitOutline-accordian" href="#files-top">Source Files</a>
     {{end}}
     {{if (or .Packages .NestedModules)}}
-      <a class="UnitOutline-accordian" href="#directories-top">Directories</a>
+      <a class="UnitOutline-accordian js-accordian" href="#directories-top">Directories</a>
     {{end}}
   </div>
 {{end}}
diff --git a/content/static/html/pages/unit.tmpl b/content/static/html/pages/unit.tmpl
index 66b2ab6..dff0b9e 100644
--- a/content/static/html/pages/unit.tmpl
+++ b/content/static/html/pages/unit.tmpl
@@ -20,6 +20,7 @@
 {{define "post_content"}}
   <div class="js-canonicalURLPath" data-canonical-url-path="{{.CanonicalURLPath}}" hidden />
   <script>
+    loadScript('/static/js/unit.js', {type: 'module', async: true, defer: true})
     loadScript('/static/js/unit_fixed_header.js', {type: 'module', async: true, defer: true})
   </script>
   {{block "unit_post_content" .}}{{end}}
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
new file mode 100644
index 0000000..fd25f8b
--- /dev/null
+++ b/content/static/js/unit.js
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+// Highlights the active accordian on page load and adds event
+// listeners to update on interaction from user.
+document.querySelectorAll('a.js-accordian').forEach((anchor, index) => {
+  const activeClass = 'UnitOutline-accordian--active';
+  if (index === 0) {
+    anchor.classList.add(activeClass);
+  }
+  anchor.addEventListener('click', () => {
+    document.querySelectorAll('a.js-accordian').forEach(el => {
+      el.classList.remove(activeClass);
+    });
+    anchor.classList.add(activeClass);
+  });
+});
diff --git a/internal/middleware/secureheaders.go b/internal/middleware/secureheaders.go
index 36e6634..6241ff4 100644
--- a/internal/middleware/secureheaders.go
+++ b/internal/middleware/secureheaders.go
@@ -29,7 +29,7 @@
 	"'sha256-gBtJYPzfgw/0FIACORDIAD08i5rxTQ5J0rhIU656A2U='",
 	"'sha256-uQODpjQEw2CWPIl6zEmpUU1uULk5RYVCofnBw59UOOw='",
 	// From content/static/html/pages/unit.tmpl
-	"'sha256-RaqfI+f+zdCA5hhJCZgjT75qpniNKKXR7oXUJKsIt14='",
+	"'sha256-w9JIp++N6M7QtDNJRXoowFUN84N5GWsJhUaoIDyMijk='",
 	// From content/static/html/pages/unit_details.tmpl
 	"'sha256-CFun5NgnYeEpye8qcbQPq5Ycwavi4IXuZiIzSMNqRUw='",
 	"'sha256-IHdniK/yZ8URNA2OYbc4R7BssOAe3/dFrSQW7PxEEfM='",