Simple JQuery Accordion Plugin - Version 3.1

1: Standard accordion menu

By default, the menu will launch in collapsed state and function like an accordion.

• Home
• Weblog Tools
  • PivotX
  • WordPress
  • four
  • Textpattern
  • Typo
• A Panel

  This contains stuff

  There can be links too

  • blerk
  • wonk
  • meh
• Programming Languages
  • PHP
  • Ruby
  • Python
  • PERL
  • Java
  • C#
• Marco's blog (no submenu)
• Cool Stuff
  • Bookalicious
  • Apple
  • Nikon
  • XBOX360
  • Nintendo
• This one contains a nested accordion!
  • Weblog Tools
    • PivotX
    • WordPress
    • Textpattern
    • Typo
  • Programming Languages
    • PHP
    • Ruby
    • Python
    • PERL
    • Java
    • C#
  • Marco's blog (no submenu)
  • Cool Stuff
    • Bookalicious
    • Apple
    • Nikon
    • XBOX360
    • Nintendo
  • Search Engines
    • Yahoo!
    • Google
    • Ask.com
    • Live Search
• Search Engines
  • Yahoo!
  • Google
  • Ask.com
  • Live Search

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.

• Weblog Tools
  • PivotX
  • WordPress
  • Textpattern
  • Typo
• Programming Languages
  • PHP
  • Ruby
  • Python
  • PERL
  • Java
  • C#
• Marco's blog (no submenu)
• Cool Stuff
  • Bookalicious
  • Apple
  • Nikon
  • XBOX360
  • Nintendo
• Search Engines
  • Yahoo!
  • Google
  • Ask.com
  • Live Search

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.

• Weblog Tools
  • PivotX
  • WordPress
  • Textpattern
  • Typo
• Programming Languages
  • PHP
  • Ruby
  • Python
  • PERL
  • Java
  • C#
• Marco's blog (no submenu)
• Cool Stuff
  • Bookalicious
  • Apple
  • Nikon
  • XBOX360
  • Nintendo
• Search Engines
  • Yahoo!
  • Google
  • Ask.com
  • Live Search

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.

• Weblog Tools
  • PivotX
  • WordPress
  • Textpattern
  • Typo
• Programming Languages
  • PHP
  • Ruby
  • Python
  • PERL
  • Java
  • C#
• Marco's blog (no submenu)
• Cool Stuff
  • Bookalicious
  • Apple
  • Nikon
  • XBOX360
  • Nintendo
• Search Engines
  • Yahoo!
  • Google
  • Ask.com
  • Live Search

Source

1. jQuery.fn.initMenu = function() {
2. return this.each(function(){
3. var theMenu = $(this).get(0);
4. $('.acitem', this).hide();
5. $('li.expand > .acitem', this).show();
6. $('li.expand > .acitem', this).prev().addClass('active');
7. $('li a', this).click(
8. function(e) {
9. e.stopImmediatePropagation();
10. var theElement = $(this).next();
11. var parent = this.parentNode.parentNode;
12. if($(parent).hasClass('noaccordion')) {
13. if(theElement[0] === undefined) {
14. window.location.href = this.href;
15. }
16. $(theElement).slideToggle('normal', function() {
17. if ($(this).is(':visible')) {
18. $(this).prev().addClass('active');
19. }
20. else {
21. $(this).prev().removeClass('active');
22. }
23. });
24. return false;
25. }
26. else {
27. if(theElement.hasClass('acitem') && theElement.is(':visible')) {
28. if($(parent).hasClass('collapsible')) {
29. $('.acitem:visible', parent).first().slideUp('normal',
30. function() {
31. $(this).prev().removeClass('active');
32. }
33. );
34. return false;
35. }
36. return false;
37. }
38. if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
39. $('.acitem:visible', parent).first().slideUp('normal', function() {
40. $(this).prev().removeClass('active');
41. });
42. theElement.slideDown('normal', function() {
43. $(this).prev().addClass('active');
44. });
45. return false;
46. }
47. }
48. }
49. );
50. });
51. };
52.  
53. $(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? Bestebloggers met Nederlandse blogs voor linkbuilding campagnes. Kies de Beste bloggers van Nederland voor een linkbuilding campagne.