(function (window, document) { var layout = document.getElementById('layout'), menu = document.getElementById('menu'), menuLink = document.getElementById('menuLink'); function toggleClass(element, className) { var classes = element.className.split(/\s+/), length = classes.length, i = 0; for(; i < length; i++) { if (classes[i] === className) { classes.splice(i, 1); break; } } // The className is not found if (length === classes.length) { classes.push(className); } element.className = classes.join(' '); } menuLink.onclick = function (e) { var active = 'active'; e.preventDefault(); toggleClass(layout, active); toggleClass(menu, active); toggleClass(menuLink, active); }; var animationSpeed = 500; $('li h2', $(menu)).on('click', function(e) { //Get the clicked link and the next element var $this = $(this); var checkElement = $this.next(); //Check if the next element is a menu and is visible if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) { //Close the menu checkElement.slideUp(animationSpeed, function() { checkElement.removeClass('menu-open'); //Fix the layout in case the sidebar stretches over the height of the window //_this.layout.fix(); }); // checkElement.parent('li').removeClass('active'); } //If the menu is not visible else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { //Get the parent menu var parent = $this.parents('ul').first(); //Close all open menus within the parent var ul = parent.find('ul.treeview-menu:visible').slideUp(animationSpeed); //Remove the menu-open class from the parent ul.removeClass('menu-open'); //Get the parent li var liParent = $this.parent('li'); //Open the target menu and add the menu-open class checkElement.slideDown(animationSpeed, function() { //Add the class active to the parent li checkElement.addClass('menu-open'); // parent.find('li.active').removeClass('active'); // liParent.addClass('active'); //Fix the layout in case the sidebar stretches over the height of the window // _this.layout.fix(); }); } //if this isn't a link, prevent the page from being redirected if (checkElement.is('.treeview-menu')) { e.preventDefault(); } }); }(this, this.document));