Comments on: Making accordion menu using jquery

By: Beben

Beben — Sat, 13 Mar 2010 15:15:56 +0000

thank you ^^

By: okmat

okmat — Thu, 25 Feb 2010 20:21:15 +0000

Thanks! this is exactly what I was looking for.
A small contribution to this code: you can add a toggle function and an ID to the element to manually collapse a specific menu, for example with a button. This not only allows for more control but also provides a way to expand a specific menu acording to the current page and even generating a java script with PHP…

Add this inside the section:
function toggle(pID){
$(document.getElementById(pID)).css({backgroundImage:”url(down.png)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
$(document.getElementById(pID)).siblings().css({backgroundImage:”url(left.png)”});
}

And ad an ID to the tag
Header-1

And a button to collapse the menu manually

Cheers!

By: nayeem@vicoast

nayeem@vicoast — Thu, 25 Feb 2010 12:44:29 +0000

The script is very good. But it has a problem. let me take u to scenario. U have clicked over a menu, it shows u all the sub menus. Now when u click over a menu which is not having any sub menu then when the opened menu regain its size but the line separating the menus get merge at one place. Can u please tell how can come over this problem.
Thanks in advance.
NayeemKhan

By: Accordion Menu Using jQuery

Accordion Menu Using jQuery — Sat, 20 Feb 2010 00:15:14 +0000

[...] Demostration Demo Page [...]

By: kamran

kamran — Tue, 16 Feb 2010 03:00:11 +0000

i think we should change second command from :
$(this).siblings().css({backgroundImage:”url(images/newsGroup_hdr.png)”});

to this:
$(this).siblings(“menu_head”).css({backgroundImage:”url(images/newsGroup_hdr.png)”});

By: stephen

stephen — Thu, 11 Feb 2010 07:32:06 +0000

Dear Roshan,

Thank you for your great effort, it is very helpful to do our things easy.

Could you guide me to edit the code for mouse over accordion to collapse if I move the mouse out of the menu.

Thank you and looking forward.

Stephen

By: Rakshit

Rakshit — Fri, 05 Feb 2010 17:54:07 +0000

Hello Praveen,

If you would like to open first menu open than you have to write style=”display:block;” sentence in First Div in HTML.

This will overwrite the CSS style of class display:none for first div.

Once you will add inline style in first div, it will be visible when page loads.

Thanks.

By: Rakshit

Rakshit — Fri, 05 Feb 2010 17:45:18 +0000

Hi,

Very well Explained. Its working. Thanks bro. Looking forward to new posts on menu styles.

Thanks,
Rakshit.

By: Praveen

Praveen — Wed, 03 Feb 2010 11:51:26 +0000

Hi,
Thanks for the script. It works. What should i do to make first menu expand by default?

Please help !

By: Web Development Company

Web Development Company — Wed, 03 Feb 2010 09:21:35 +0000

Simply excellent , it helps a lot while programming with Jquery. i got the learning Jquery e-books from some rapid sites, there are really very invaluable info on this language. . . . .Thanks for sharing

By: Amazing jQuery Accordions « anil's Blog

Amazing jQuery Accordions « anil's Blog — Sat, 30 Jan 2010 14:52:25 +0000

[...] Accordion menu using jQuery [...]

By: 13 Excellent Tutorials On Creating jQuery Navigation Menu « Nulls

13 Excellent Tutorials On Creating jQuery Navigation Menu « Nulls — Tue, 26 Jan 2010 01:32:03 +0000

[...] 2- How to make accordion menu using jquery [...]

By: 30 Useful Tutorial for JavaScript Framework Navigation | Tutorials | instantShift

Mon, 25 Jan 2010 14:18:55 +0000

[...] Official Link [...]

By: Gotowe skrypty jquery, mootools « Sebastian Sobieraj

Gotowe skrypty jquery, mootools « Sebastian Sobieraj — Sat, 23 Jan 2010 11:20:38 +0000

[...] 23. Accordion style jQuery menu: [...]

By: michel

michel — Tue, 19 Jan 2010 07:12:44 +0000

« BUT, not on Safari (windows and mac) : impossible to open the menu if configurated on “clicking” and when completely closed. »
Sorry for disturbing : all is OK now. The menu works perfectly, in Safari too !