menutoggle.js (1403B)
1 // Grab any element that has the 'js-toggle' class and add an event listner for the toggleClass function
2 var toggleBtns = document.getElementsByClassName('js-toggle')
3 for (var i = 0; i < toggleBtns.length; i++) {
4 toggleBtns[i].addEventListener('click', toggleClass, false)
5 }
6
7 function toggleClass() {
8 // Define the data target via the dataset "target" (e.g. data-target=".docsmenu")
9 var content = this.dataset.target.split(' ')
10 // Find any menu items that are open
11 var mobileCurrentlyOpen = document.querySelector('.mobilemenu:not(.dn)')
12 var desktopCurrentlyOpen = document.querySelector('.desktopmenu:not(.dn)')
13 var desktopActive = document.querySelector('.desktopmenu:not(.dn)')
14
15 // Loop through the targets' divs
16 for (var i = 0; i < content.length; i++) {
17 var matches = document.querySelectorAll(content[i]);
18 //for each, if the div has the 'dn' class (which is "display:none;"), remove it, otherwise, add that class
19 [].forEach.call(matches, function(dom) {
20 dom.classList.contains('dn') ?
21 dom.classList.remove('dn') :
22 dom.classList.add('dn');
23 return false;
24 });
25 // close the currently open menu items
26 if (mobileCurrentlyOpen) mobileCurrentlyOpen.classList.add('dn')
27 if (desktopCurrentlyOpen) desktopCurrentlyOpen.classList.add('dn')
28 if (desktopActive) desktopActive.classList.remove('db')
29
30 }
31 }