Simple JQuery Accordion Plugin - Version 3.1
This is a simple menu done in JQuery. It's an evolved version of the menu first presented in the i-marco weblog entry.
I've got information man! New shit has come to light!
--Jeff Bridges as 'The Dude' in The Big Lebowski
- Now supports nested accordions (1 level, more is madness)
- Adds a class 'active' to any active (opened) item
- Now supports panels that can contain anything
There is no cookie stuff. Please control state through your page (generation) code by adding the expand class to items that need to be expanded t page load time.
If this plugin is useful for you feel free to download it and use it on your website.
This plugin is discussed on my 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 expand to the item we want to be expanded.
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.
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
-
jQuery.fn.initMenu = function() { -
return this.each(function(){ -
var theMenu = $(this).get(0); -
$('.acitem', this).hide(); -
$('li.expand > .acitem', this).show(); -
$('li.expand > .acitem', this).prev().addClass('active'); -
$('li a', this).click( -
function(e) { -
e.stopImmediatePropagation(); -
var theElement = $(this).next(); -
var parent = this.parentNode.parentNode; -
if($(parent).hasClass('noaccordion')) { -
if(theElement[0] === undefined) { -
window.location.href = this.href; -
} -
$(theElement).slideToggle('normal', function() { -
if ($(this).is(':visible')) { -
$(this).prev().addClass('active'); -
} -
else { -
$(this).prev().removeClass('active'); -
} -
}); -
return false; -
} -
else { -
if(theElement.hasClass('acitem') && theElement.is(':visible')) { -
if($(parent).hasClass('collapsible')) { -
$('.acitem:visible', parent).first().slideUp('normal', -
function() { -
$(this).prev().removeClass('active'); -
} -
); -
return false; -
} -
return false; -
} -
if(theElement.hasClass('acitem') && !theElement.is(':visible')) { -
$('.acitem:visible', parent).first().slideUp('normal', function() { -
$(this).prev().removeClass('active'); -
}); -
theElement.slideDown('normal', function() { -
$(this).prev().addClass('active'); -
}); -
return false; -
} -
} -
} -
); -
}); -
}; -
$(document).ready(function() {$('.menu').initMenu();});
Download
Download everything in a zip file
PHP Development
For a new version of the plugin we are looking to hire a PHP developer. Sent reactions using the contact form at this page: https://www.crossinternet.nl/php-developer-php-ontwikkelaar/ - Reactions for the PHP developer position : sent us a mail.
De ontmoetingsplek voor bloggers, influencers & linkbuilders voor kwalitatieve linkbuilding vinden? Beste Bloggers met Nederlandse blogs voor linkbuilding campagnes. Kies de Beste bloggers van Nederland voor een linkbuilding campagne.