


Simple JQuery Accordion menu - Redux 2
This is a simple menu done in JQuery. It's an evolved version of the menu first presented in this weblog entry. I made these changes after receiving all sorts of change requests and other feedback on the original version. This new version is rather flexible and caters to various needs people may have when building a website. It also allows multiple instances of the menu on the same webpage, unlike the original. This version saves state in a cookie so the menu will follow you through pageviews. For this to work, each expandable menu item needs a class name unique for the menu it's part of. View source to see what this means.
This snippet requires the JQuery Cookie Plugin.
This snipped is discussed on the i-marco blog in this post.
1: Standard accordion menu
By default, the menu will launch in collapsed state and function like an accordion.
2: Accordion with first submenu expanded at page load
Same as the first example but with the first submenu expanded when the page loads. This is achieved by adding a CSS class expandfirst to the unordered list.
3: Non-accordion (standard expandable menu)
This is a standard expandable menu without accordion functionality. This is achieved by adding a CSS class named noaccordion to the unordered list. This menu 'remembers' state for the last opened menu, not all of them.
4: Collapsible accordion with first item expanded at page load
This menu works like an accordion when one menu item is already expanded but will collapse completely when the expanded item is clicked. Additionally it has the first item expanded at page load. This is achieved by adding a CSS class named collapsible and another CSS class named expandfirst like in example 2.
Source Code
-
function initMenus() {
-
$('ul.menu ul').hide();
-
$.each($('ul.menu'), function(){
-
var cookie = $.cookie(this.id);
-
if(cookie != null && String(cookie).length < 1) {
-
$('#' + this.id + '.expandfirst ul:first').show();
-
}
-
else {
-
$('#' + this.id + ' .' + cookie).next().show();
-
}
-
});
-
$('ul.menu li a').click(
-
function() {
-
var checkElement = $(this).next();
-
var parent = this.parentNode.parentNode.id;
-
if($('#' + parent).hasClass('noaccordion')) {
-
if((String(parent).length > 0) && (String(this.className).length > 0)) {
-
if($(this).next().is(':visible')) {
-
$.cookie(parent, null);
-
}
-
else {
-
$.cookie(parent, this.className);
-
}
-
$(this).next().slideToggle('normal');
-
}
-
}
-
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
-
if($('#' + parent).hasClass('collapsible')) {
-
$('#' + parent + ' ul:visible').slideUp('normal');
-
}
-
return false;
-
}
-
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
-
$('#' + parent + ' ul:visible').slideUp('normal');
-
if((String(parent).length > 0) && (String(this.className).length > 0)) {
-
$.cookie(parent, this.className);
-
}
-
checkElement.slideDown('normal');
-
return false;
-
}
-
}
-
);
-
}
-
$(document).ready(function() {initMenus();});