1 files changed, 31 insertions, 0 deletions
diff --git a/docs/themes/gohugoioTheme/assets/js/menutoggle.js b/docs/themes/gohugoioTheme/assets/js/menutoggle.js
new file mode 100644
index 000000000..d0e645385
--- /dev/null
+++ b/docs/themes/gohugoioTheme/assets/js/menutoggle.js
@@ -0,0 +1,31 @@
+// Grab any element that has the 'js-toggle' class and add an event listner for the toggleClass function
+var toggleBtns = document.getElementsByClassName('js-toggle')
+  for (var i = 0; i < toggleBtns.length; i++) {
+    toggleBtns[i].addEventListener('click', toggleClass, false)
+  }
+
+function toggleClass() {
+  // Define the data target via the dataset "target" (e.g. data-target=".docsmenu")
+  var content = this.dataset.target.split(' ')
+  // Find any menu items that are open
+  var mobileCurrentlyOpen = document.querySelector('.mobilemenu:not(.dn)')
+  var desktopCurrentlyOpen = document.querySelector('.desktopmenu:not(.dn)')
+  var desktopActive = document.querySelector('.desktopmenu:not(.dn)')
+
+  // Loop through the targets' divs
+  for (var i = 0; i < content.length; i++) {
+    var matches = document.querySelectorAll(content[i]);
+    //for each, if the div has the 'dn' class (which is "display:none;"), remove it, otherwise, add that class
+    [].forEach.call(matches, function(dom) {
+        dom.classList.contains('dn') ?
+        dom.classList.remove('dn') :
+        dom.classList.add('dn');
+         return false;
+       });
+        // close the currently open menu items
+      if (mobileCurrentlyOpen) mobileCurrentlyOpen.classList.add('dn')
+      if (desktopCurrentlyOpen) desktopCurrentlyOpen.classList.add('dn')
+      if (desktopActive) desktopActive.classList.remove('db')
+
+    }
+  }