Stupid Simple jQuery Accordion Menu

I always like stupid simple scripts to use. Thanks.

Page bookmarked for future reference

This one is so stupid simple it even worked for me. Many thanks.

Wow, this is great Ryan. I’ve been battling with the jquery ui implementation for quite some time, and I couldn’t for the life of me figure out what could possibly be so hard when all I’ve wanted is exactly what you’ve done here. Thank you! Going up on the littleshoot.org site very soon now.

-Adam

Online now — the nav menu at http://www.littleshoot.org/home

Thanks again!

-Adam

Glad you like it. We’re actually about to issue a major new release that’s the first true p2p browser plugin ever built (NPAPI, ActiveX). If you feel like taking it for a spin, it’s at:

http://www.littleshoot.org/beta

Hi Ryan – how easy would it be to open the first accordion on entry to the form? (I’m using it for a news list)

Many thanks

Neil

Very nice example, funny how simple it is. Bookmarked.

Awesome! Awesome! Awesome! I’ve been banging my head against a wall using the jquery ui accordion and just couldn’t understand why so much code was needed for an accordion. I’m using it right now but would it be possible to have the button of the accordion that is open be different from the other buttons? For example, the closed accordion’s buttons would be black and the open accordion’s button would be red. Don’t know how difficult that would be so don’t waste your time if it’s very difficult. Thanks again!!!

I read your article “Change the Style of DIV on Mouseover with jQuery” and based on that I think I may have come up with a solution to my problem of changing the class of the accordion button depending on whether or not its content is open. This code may very well be wrong but I replaced…


$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});


with


$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
$("div.accordionButtonSelected").removeClass().addClass("accordionButton");
$(this).removeClass().addClass("accordionButtonSelected");
});


I’ve tested it in IE7, IE6, Firefox, Chrome, Safari and it seems to work but I guess that doesn’t necessarily mean it’s right. Thanks for any advice you can give!

Great tutorial!

Excited to see the google API being used (which everybody should do!).

How would you make it a “fixed” height?
(So it dosent use the invidual height on each “content”?)

Thanks so much Ryan! You saved me a lot of time!

I’d like ask one more question: Is it possible to have a behaviour that when you click on the button with the content already open this causes the content to close again (without another content opening)?

Best regards
Helge

@Helge I just got this working… pretty simple… lets see… starting after the ready statement and the part where you hide:

$(“div.accordionButton”).click(function() {
if ($(this).is(“.accordionButtonSelected”)){
$(“div.accordionContent”).slideUp(“normal”);
} else {
$(“div.accordionContent”).slideUp(“normal”);
$(this).next().slideDown(“normal”);
$(“div.accordionButtonSelected”).removeClass().addClass(“accordionButton”);
$(this).removeClass().addClass(“accordionButtonSelected”);
}
});

Basically you look for the “selected” class and then handle it differently. Specifically, you close it and nothing else!

I’m a hack so there’s prolly some smarty pants over here that can do it in like 2 characters or something… anyway, works for me!

whee!!

Thanks to Ryan for the tutorial and Jeremy Thompson for the “selected” trick!!!!
-Fever

oh yeah… if yr tweaking the “selected” style… you can remove it on close by:

$(”div.accordionButton”).click(function() {
if ($(this).is(”.accordionButtonSelected”)){
$(”div.accordionContent”).slideUp(”normal”);
$(this).removeClass().addClass(“accordionButton”);
} else {…

note the new “$(this).removeClass().addClass(“accordionButton”);”

this way you can have an “on” bg color and an “off” bg color (if you just used my 1st example, the button would always be “on”)

again, above disclaimer still applies… hack, prolly a slicker way, etc.

Thanks for the tut.

I wounder if we can add a script to allow the opened content to close when clicking on the same button.

Regards,,
Moosa

Thanks for a nicely written example! I was wondering if it’s possible to get this easyly working in IE 6? In the demo it doesn’t seem to hide everything correctly in this damn relic browser.

This is a great wee script as it keeps things very simple. My only problem is that sometimes the content flickers as a div is opening or closing. This does not happen all the time but it is very noticeable when it does! I have images as part of the accordion content. I’d appreciate any help or suggestions.

@Gary B I’ve noticed a flicker if you have any type of padding inside your .accordionContent box. Not sure if that’s what’s causing your problem, just something I’ve noticed.

@Gary B – Check your marging and padding around the accordion content

This is so insanley simple I’m kicking myself for not trying something similiar instead of using all these uber bloated accordian scripts. Like many here I just need a clean lightweight method for creating a simple accordian. This fits the bill perfect.

This is a very nice and simple script thanks so much for posting it, just what I needed.

Terry

Hi!

thanks for this tutorial, very helpfull indeed!
I have just started out playing arond with Jquery and i wanted to ask for some help.

i was able to integrate an accordion menu with my wordpress theme
as so:
Portfolio


now all i really need to do is add a css class ‘active’ to the accordionButton which contains the active category(category being displayed).

now i dont know if you are familiar with wordpress at all, but that part of the code wp_list_categories creates an UL of category links.
since i assigned one category under each div of the accordion, i need to create a style that identifies where the current category is.

i hope i was able to explain myself!

any insights are greatly appreciated!

thanks,
pvf

re: pvf:

WordPress has a built-in CSS class for currently selected pages.

If you search the wordpress codex for .current_page_item you should find it.

Basically wordpress automatically appends this class to the currently selected page, so you should be able to style this for your accordian with CSS.

Greate..:)

@Gary B: check the CSS file: the “.accordionContent” div should be display: none;

.accordionContent {
width: 800px;
float: left;
background: #95B1CE;
display: none;
}

So thankful to come across this thread. Like others, I’ve been driving myself bonkers with the UI scripts. I changed the click event to mouseover so sections expand on hover. The only problem is that when you mouse off of the menu, the currently expanded section remains expanded. Could someone help a javascript novice and explain how to make the entire menu collapse to its original state on mouseout? Thanks in advance!

@Ryan – I really appreciate it. Almost got it. Below is the code I added, and the content areas now collapse immediately upon mousing out of the buttons (preventing access to the content areas). As I mentioned I’m brand-spanking new with javascript so this may look completely laughable. Any help would be appreciated. Thanks!

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).mouseover(function() {

if($(this).next().is(‘:visible’)) {
$(‘div.accordionContent’).slideUp(‘normal’);
} else {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

$(‘div.leftnav’).mouseout(function() {
$(“div.accordionContent”).slideUp(‘normal’);

});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();

});

Many thanks for making this available. Is there a way for an open element to be open right from the start without sliding down at the beginning? Thanks in advance!

@Ryan – Cheers for your litle snippet of code to close an open tab, works a treat and saved me lots of time trying to hack a solution myself.

Thanks for this stupidly simple script!!! I’ve got a question, because the thing I want to do is a little weird.

What I need is for the according to open when you hover over the .accordionButton When you mouse out it stays open though.

But then the only way to close the according is if you CLICK on either the open button, or another one.

Does that make sense? I am new to javascript, so I have no clue what I’m doing.

Hey!
Any idea how to make the selected AccordionButton appear in a different style? CSS?

Hi Folks. Thanks for the great script. This is exactly what I needed. I have a question and hopefully it is easy to solve. I basically just want to customize the script so that when you click on one section, the section that was previously open closes first and then the section that you clicked opens afterwards. As of now, they open and close at the same time. Is there someway to delay the opening of the new section until after the first section closes?

Does anyone know how to do this? I am pretty much a beginner with javascript.

I appreciate any help in advance.

Thanks a bunch.

Thank you so very much for this script. It works out perfectly for my site, where I really want users to have an interactive visiting experience — it truly allows users to see only the content they request!

I have one question — is there a simple way to style the “accordionButton” class to have a hover color?

Thanks again!

You can make this better by not using inline styles … and instead using proper document structure:


Section 1 Title
Content 1

And alter your javascript to:


$(document).ready(function() {

//HIDE THE DIVS ON PAGE LOAD
$("p").hide();


Hi,

Thanks for the great script.

Is there a way to make the sub-menu stay open if the user is browsing that specific category?

The sub-menu would also close if the user went to another category and the newly chosen category would open.

I hope this makes sense.

Sorry about that.

Say I have 3 sub-menus:

Menu Button 1

Link 1
Link 2
Link 3

Menu Button 2

Link 1
Link 2
Link 3

Menu Button 3

Link 1
Link 2
Link 3

Once I click on link 1 in menu 1. I want that sub-menu to stay open until I click on another sub-menu link in one of the other 2 menus.

This is the site I am working on:

http://libertyink.com/

I would prefer a class to be added by the script since this menu will be added and amended dynamically.

I have a similar question to Justin, I think –

I’m trying to modify your javascript so that I can have multiple sections of the accordion expanded at the same time.

Commenting out this line in the “else” statement:
$(‘div.accordionContent’).slideUp(‘normal’);

achieves that — the problem is, when I click to close any of the accordion sections, every section closes, not just the one I clicked on.

Any ideas?

Thanks again for your help Ryan! This tutorial rocks.

Thanks for this tutorial. Even a noob like me was able to implement this accordion on his site.

Is there a way to make the page scroll to the top of the opened accordion item automaticly (when clicked only, not on page load)?

I got a shorter item under a long item so when the long one closes and the short one opens then the short one vanishes and I have to scroll up to see it. So a auto scroll to the top of the newly opened item would be awesome.

Hi Ryan,

This works great for keeping all of the elements open, but what about having one element open at a time?

I converted the code to work with an unordered list.

Will this cause issues?

Here is my css and java I am using…

/*Menu CSS*/

* {margin: 0; padding: 0;}
a:focus {outline:none;}

#menu_container {
background:#fff url(../imgs/global/right.jpg) top left repeat-x;
border:1px solid #B2C397;
padding:2px 8px 6px 8px;
position:relative;
list-style:none;
width:204px;
float:left;
left:15px;
}

#menu li{
list-style:none;
}

ul#menu {
margin:0px 0px 0px 0px;
list-style:none;
padding:0px;
}

ul#menu a {
text-decoration:none;
cursor:pointer;
display:block;
}

ul#menu .active {
padding:5px 7px 5px 8px;
margin:4px 0px 0px 0px;
list-style-type:none;
letter-spacing:.2px;
background:#3F85C1;
position:relative;
font-weight:bold;
text-align:left;
font-size:12px;
cursor:pointer;
display:block;
color:#ffffff;
width:188px;
}

ul#menu .active:hover {
padding:5px 7px 5px 8px;
margin:4px 0px 0px 0px;
list-style-type:none;
letter-spacing:.2px;
background:#3F85C1;
position:relative;
font-weight:bold;
text-align:left;
font-size:12px;
cursor:pointer;
display:block;
color:#ffffff;
width:188px;
}

ul#menu li a {
padding:5px 7px 5px 8px;
margin:4px 0px 0px 0px;
list-style-type:none;
letter-spacing:.2px;
background:#E7EEC7;
position:relative;
font-weight:bold;
text-align:left;
font-size:12px;
cursor:pointer;
display:block;
color:#006699;
width:188px;
}

ul#menu li a:hover {
padding:5px 7px 5px 8px;
margin:4px 0px 0px 0px;
list-style-type:none;
letter-spacing:.2px;
background:#59A1DE;
position:relative;
font-weight:bold;
text-align:left;
font-size:12px;
cursor:pointer;
display:block;
color:#ffffff;
width:188px;
}

ul#menu li ul li a {
background:#F5F9E4 url(../imgs/global/nav_up.png) top left no-repeat;
background-position:6px 4px;
padding:5px 7px 5px 26px;
margin:2px 0px 0px 0px;
text-decoration:none;
font-weight:bold;
text-align:left;
font-size:12px;
display:block;
color:#0259A1;
width:170px;
}

ul#menu li ul li a:hover {
background:#E7EEC7 url(../imgs/global/nav_over.png) left no-repeat;
background-position:6px 4px;
padding:5px 7px 5px 26px;
margin:2px 0px 0px 0px;
text-decoration:none;
font-weight:bold;
text-align:left;
font-size:12px;
display:block;
color:#0259A1;
width:170px;
}

/*Menu Java*/

$(document).ready(function() {

//Controls accordion category (ul#menu li a) action.
$(‘ul#menu>li>a’).click(function() {
$(‘ul#menu li ul’).slideUp(‘fast’);
$(this).next().slideDown(‘fast’);
});

//Hide the options on page load.
$(“ul#menu li ul”).hide();
$(“ul#menu .submenu_active”).show();

});

Excellent, thanks so much!

Hi,

Sorry Ryan! I think I thanked Drew as the author of the tut. So Thanks Ryan. It was and still is a great tut.

I was writing a reply to Justin and I think I timed-out and lost everything I have typed. Then I thought the replies are moderated until I sent that sorry message. I am going to try again.

So Justin… Here is the html layout if you want to do it with ULs:

Button 1

Link 1
Link 2
Link 3
Link 4

Button 2

Link 1
Link 2
Link 3
Link 4

The JQuery code
1. For the header click function:

$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});
Very simple, as suggested by Drew.

2. The links click function:

$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});
Then you set your .activeLink class style in your CSS.

3. For the Hover function :
$(“.linkds”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});
And then you have also to set your style for the .hoveredLink class in your CSS

4. Adding automatic triggers:

$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

0. Put it all together :
This should have been the first point.
a) prepare your html
b) combine your JQuery function
This is is the end result :

$(document).ready(function(){
//Button click function
$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

//Links click function
$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});

//Links hover function
$(“.links”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});

//Automatic triggers
$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

}); //closes the document.ready function

c) Now set your CSS styles for these classes :
.accordionContent
.accordionButton
.hoveredLink
.activeLink
.links

Final notes :
a. For triggers, you can give the “open” id in your html to the header you want to load first. You can also do the same for the link, but it has to be inside the header you want to load or acivate.

b. You will have to play with your css to make sure you get rid of the gap left between header and the links (due to the ul.accordion content.

c. Users will have to click on the header before getting to click on the link, unless you trigger the click inside the click action of the header. But this would be tricky and hard to code because a trigger must come after the function it calls.

Good Luck! Hope this will help.

This is a repost because the html code did not show up.
So Justin… Here is the html layout if you want to do it with ULs:


Button 1

The JQuery code
1. For the header click function:

$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});
Very simple, as suggested by Drew.

2. The links click function:

$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});
Then you set your .activeLink class style in your CSS.

3. For the Hover function :
$(“.linkds”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});
And then you have also to set your style for the .hoveredLink class in your CSS

4. Adding automatic triggers:

$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

0. Put it all together :
This should have been the first point.
a) prepare your html
b) combine your JQuery function
This is is the end result :

$(document).ready(function(){
//Button click function
$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

//Links click function
$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});

//Links hover function
$(“.links”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});

//Automatic triggers
$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

}); //closes the document.ready function

c) Now set your CSS styles for these classes :
.accordionContent
.accordionButton
.hoveredLink
.activeLink
.links

Final notes :
a. For triggers, you can give the “open” id in your html to the header you want to load first. You can also do the same for the link, but it has to be inside the header you want to load or acivate.

b. You will have to play with your css to make sure you get rid of the gap left between header and the links (due to the ul.accordion content.

c. Users will have to click on the header before getting to click on the link, unless you trigger the click inside the click action of the header. But this would be tricky and hard to code because a trigger must come after the function it calls.

Good Luck! Hope this will help.

So Justin… Here is the html layout if you want to do it with ULs:
Sorry again guys!

Button 1

Link 1
Link 2
Link 3
Link 4

Button 2

Link 1
Link 2
Link 3
Link 4

The JQuery code
1. For the header click function:

$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});
Very simple, as suggested by Drew.

2. The links click function:

$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});
Then you set your .activeLink class style in your CSS.

3. For the Hover function :
$(“.linkds”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});
And then you have also to set your style for the .hoveredLink class in your CSS

4. Adding automatic triggers:

$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

0. Put it all together :
This should have been the first point.
a) prepare your html
b) combine your JQuery function
This is is the end result :

$(document).ready(function(){
//Button click function
$(‘.accordionButton’).click(function()
{
if($(this).next().is(‘:visible’))
{
$(‘.accordionContent’).slideUp(‘normal’);
}
else
{
$(‘.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

//Links click function
$(“.links”).click(function(){
if ($(this).is(“.activeLink”)) //already active link
{
return false;
}
else
{
$(“.activeLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“activeLink”);
return false;
}
});

//Links hover function
$(“.links”).hover(function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
$(this).removeClass().addClass(“.hoveredLink”);
}
}, //and yeah! it’s not a semi-colon
function(){
if ($(this).is(“.activeLink”)) //link is already active
{
return false;
}
else
{
$(“.hoveredLink”).removeClass().addClass(“links”);
}
});

//Automatic triggers
$(“#open”).trigger(‘click’)
$(“.links:first”).trigger(‘click’);

}); //closes the document.ready function

c) Now set your CSS styles for these classes :
.accordionContent
.accordionButton
.hoveredLink
.activeLink
.links

Final notes :
a. For triggers, you can give the “open” id in your html to the header you want to load first. You can also do the same for the link, but it has to be inside the header you want to load or acivate.

b. You will have to play with your css to make sure you get rid of the gap left between header and the links (due to the ul.accordion content.

c. Users will have to click on the header before getting to click on the link, unless you trigger the click inside the click action of the header. But this would be tricky and hard to code because a trigger must come after the function it calls.

Good Luck! Hope this will help.

Sorry againe guys. I was trying to find out a way to show up the html code for the post above but could not. So I decided to put a small mistake in the code so that the browser can show it. Just remove the * character and replace the # by your target link.

Here is the html code :

Button 1

Link 1
Link 2
Link 3
Link 4

Button 2

Link 1
Link 2
Link 3
Link 4

Button 3

Link 1
Link 2
Link 3
Link 4

Still did not work…
Sorry againe guys. I was trying to find out a way to show up the html code for the post above but could not. So I decided to put a small mistake in the code so that the browser can show it. Just replace the leading * by
*li class=”accordionButton”*>Button 1
*li class=”accordionContent”*>
*ul class=”ListOfLinks”*>
*li class=”links”*>Link 1
*li class=”links”*>Link 2
*li class=”links”*>Link 3
*li class=”links”*>Link 4
*/ul*>
*/li*>
*li class=”accordionButton”*>Button 2
*li class=”accordionContent”*>
*ul class=”ListOfLinks”*>
*li class=”links”*>Link 1
*li class=”links”*>Link 2
*li class=”links”*>Link 3
*li class=”links”*>Link 4
/ul*>
*/li*>
*li class=”accordionButton”*>Button 3
*li class=”accordionContent”*>
*ul class=”ListOfLinks”*>
*li class=”links”*>Link 1
*li class=”links”*>Link 2
*li class=”links”*>Link 3
*li class=”links”*>Link 4
*/ul*>
*/li*>
*/ul*>

Thanks Ryan!

Thanks for the Patience… Here is the HTML code for the previous reply :

(ul id=”Wraper”)(!– The Full Menu has to be a UL–)
 (li id=”open” class=”accordionButton”)Tâches de routine(/li)
 (li class=”accordionContent”)
  (ul class=”ListOfLinks”)
   (li class=”links”)(a href=”#”)Link 1(/a)(/li)
   (li class=”links”)(a href=”#”)Link 2(/a)(/li)
   (li class=”links”)(a href=”#”)Link 3(/a)(/li)
   (li class=”links”)(a href=”#”)Link 4(/a)(/li)
  (/ul)
 (/li)
(/ul)
Just replace the () characters by the correct ones. I think I finally got it…

Awesome article. Im glad I found this. It works perfect. Is it possible to get one of them active (already showing) when the page loads?

Thanks Jeremie and everyone else who helped me!

Hello Ryan,

can you please help me?

i want to create a condition in which it can detect if the accordionContent is slide down.

Example. if($(this).next(‘div.accordionContent’)).is(slideDown){
}
else{
}

But im just a newbie in JQuery.

Thanks…

Hey Ryan,

I already got the logic… thank you very much!

var $j = jQuery.noConflict();
$j(document).ready(function() {

$j(‘div.accordionButton’).click(function() {

if($j(this).next().is(‘:visible’))
{

$j(‘div.accordionContent’).slideUp(‘fast’);
$j(‘div.accordionTitle1′).text(“Hide”);
}
else
{
$j(‘div.accordionTitle1′).text(“Hide”);
$j(‘div.accordionContent’).slideUp(‘fast’);
$j(this).next().slideDown(‘fast’);
$j(‘div.accordionTitle1′,this).text(“Learn More”);
}
});

$j(“div.accordionContent”).hide(“fast”);

$j(‘div.accordionTitle1′).text(“Hide”);

});

Love it, Realy simple and easy to style too. I used it for person information in WordPress. Thanks!

Ryan, thanks so much for this simple script! I agree with you that using divs instead of lists makes the thing simpler to integrate into an existing site. I spent the past week searching for an accordion that I can understand (I’m a total JS newbie), yours does the job perfectly. I need to figure out how to modify the speed, but that’s just a minor tweak. Thanks again!

Ryan, thanks so much for this simple script! I agree with you that using divs instead of lists makes the thing simpler to integrate into an existing site. I spent the past week searching for an accordion that I can understand (I’m a total JS newbie), yours does the job perfectly. I need to figure out how to modify the speed, but that’s just a minor tweak.
Another thing I’m trying to get to work is a ‘second level’, you know, one sub-accordion that opens within the main accordion? Would this be easy to implement?
Thanks again!

(sorry for the double post!! The first one didn’t show up at first and I thought it got ‘lost’…)

…just answered my first question: to change the speed of the slide, change “slideUp(‘normal’)” to “slideUp(‘fast’)” in all instances, same with “slideDown…”.

Any one experience Accordion BUG in IE6?

I hope someone can help ’cause obviously I’m missing something ;o/

The page I’m working on is at http://suewaitelangley.com/DrCTakeTwo/Take2.html

I’ve worked all afternoon on this problem…
I did manage to make the selected class work so that my images are changing (blue to orange on click…THANKS)

BUT…

I need to add a hover function (when you hover over the blue button it should turn orange BEFORE clicking when it will stay orange and expand)

AND…

I need to be able to click on an orange button (the content is expanded) and have it close the content and turn back to blue.

From all I’ve read both are possible but no matter how I’ve messed with the code I cannot get these functions to work.

HELP!

My code right now is…

$(document).ready(function() {

/********************************************************************************************************************
SIMPLE accordion STYLE MENU FUNCTION
********************************************************************************************************************/
$(‘div.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
$(“div.accordionButtonSelected”).removeClass().addClass(“accordionButton”);
$(this).removeClass().addClass(“accordionButtonSelected”);
});

/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$(“div.accordionContent”).hide();

});

Thanks so much for all of your help. Hope someone sees this!

jquery

var $j = jQuery.noConflict();
$j(document).ready(function() {

/********************************************************************************************************************
SIMPLE ACCORDIAN STYLE MENU FUNCTION
********************************************************************************************************************/
$j(‘div.accordionButton’).click(function() {

/* Check Accordion if Visible */
if($j(this).next().is(‘:visible’))
{
$j(‘div.accordionContent’).slideUp(‘fast’);
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
}
else
{
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);

$j(‘div.accordionContent’).slideUp(‘fast’);
$j(this).next().slideDown(‘fast’);

/* Check selected accordiontitle to text hide */
$j(‘div.accordionTitle1′,this).text(“Hide”);
$j(‘div.accordionImage’,this).css(‘background-image’,'url(style/images/close.png)’);

}
});

/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$j(“div.accordionContent”).hide(“fast”);

/********************************************************************************************************************
SET div to text HIDE
********************************************************************************************************************/
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
});

html

Button 1 Content
Content 1Long Example
Button 2 Content
Content 2Medium Example
Button 3 Content
Content 1Short Example
Button 4 Content
Content 4Extra Long Example

Hope it can help u! it will switch check/wrong picture per accordion click.

Thanks so much for the code! Now a second click is closing the content area…but…now my buttons are not changing from blue to orange. I replaced the check and close .pngs with my image names (announcement.png and newselected.png respectively) in your code. But my buttons stay blue. This code from one of the top posts worked to change the class of my buttons to change the background but I don’t know if or how it should be integrated.

What did I miss?

Thanks again for solving my need to close the content areas. You are too smart!

UPDATE

So now I have the button turning orange when clicked…

AND on the second click the content is sliding up! Yeah!

BUT the selected class does not revert to the blue button UNTIL I click another button. How can I combine the second click that hides the content with the switch back to the blue button…in other words if all content is hidden…all buttons should be blue.

Thanks…almost got it thanks to all of your help.

Hi everybody, I was trying to incorporate some fading-in and out, I thought something like
$(this)(‘div.accordionContent’).fadeIn(‘slow’);
withing the ‘else’ statement might do the job, but unfortunately it doesn’t (and as probably everybody can tell I have close to no clue about JavaScript). Any ideas?

Andreas

if($j(this).next().is(’:visible’))
{
$j(’div.accordionContent’).slideUp(’fast’);
$j(’div.accordionTitle1′).text(”Learn More”);
$j(’div.accordionImage’).css(’background-image’,’url(style/images/check.png)’);
}

This code is, if all content is hidden.
Hehehehe…. Try & Try until you succeed!

OK…I guess I’m confused with the labels…

div.accordionContent (I have this div label and understand what you’re doing.
div.accordionTitle1 (I think this div label refers to the selected div which in my case is div.accordionButtonSelected)
BUT it’s the div.accordionImage I’m really confused on…not sure what you’re referring to.

I have div.accordionButton (blue background)
and I have div.accordionButtonSelected (orange background)
and I changed the url for the image you have as check.png to my url for the blue button

I put a text file of my js file at http://suewaitelangley.com/DrCTakeTwo/JS/CollapsibleAccordion.txt

AND my css file is at http://suewaitelangley.com/DrCTakeTwo/Take2.css

Obviously I’m not the js queen…but I’m pretty good at following code once it’s working and learning for future from there. THANKS so much for all of your patience and help. Sue

jquery

var $j = jQuery.noConflict();
$j(document).ready(function() {

/********************************************************************************************************************
SIMPLE ACCORDIAN STYLE MENU FUNCTION
********************************************************************************************************************/
$j(‘div.accordionButton’).click(function() {

/* Check Accordion if Visible */
if($j(this).next().is(‘:visible’))
{
$j(‘div.accordionContent’).slideUp(‘fast’);
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
}
else
{
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);

$j(‘div.accordionContent’).slideUp(‘fast’);
$j(this).next().slideDown(‘fast’);

/* Check selected accordiontitle to text hide */
$j(‘div.accordionTitle1′,this).text(“Hide”);
$j(‘div.accordionImage’,this).css(‘background-image’,'url(style/images/close.png)’);

}
});

/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$j(“div.accordionContent”).hide(“fast”);

/********************************************************************************************************************
SET div to text HIDE
********************************************************************************************************************/
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
});

html

[body]
[div id="wrapper"]
[div class="accordionButton" id="open"]Button 1 Content [div class="accordionImage"][/div][div class="accordionTitle1"][/div][/div]
[div class="accordionContent"]Content 1[br /][br /][br /][br /][br /][br /][br /][br /]Long Example[/div]
[div class="accordionButton"]Button 2 Content [div class="accordionImage"][/div][div class="accordionTitle1"][/div][/div]
[div class="accordionContent"]Content 2[br /][br /][br /][br /][br /]Medium Example[/div]
[div class="accordionButton"]Button 3 Content [div class="accordionImage"][/div][div class="accordionTitle1"][/div][/div]
[div class="accordionContent"]Content 1[br /]Short Example[/div]
[div class="accordionButton"]Button 4 Content [div class="accordionImage"][/div][div class="accordionTitle1"][/div][/div]
[div class="accordionContent"]Content 4[br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /][br /]Extra Long Example[/div]
[/div]
[div class="accordionImage" style="background-image: url(images/check.png); height: 100px; width:100px;"/]
[/body]

In my case i switch the two image. But then in your case you switch the background color right. Therefore the logic is still the same.

Thank you!! so much.. Its works great

how do you add a delay to the slidDown effect for the accordion menu?

Hi everybody, I’m experiencing a very weird problem in Safari. I built a little site that contains flash content in each Accordion content level, and when opening the accordion one after another everything works well-BUT when e.g. going first to “audio” and then to “motion graphics”, the swf file doesn’t run properly. The weirdest thing is that I can’t reproduce it, on the laptop of my roommate everything is working (as it is in Firefox, too). Here’s the site: http://www.andreastretner.de
PLEASE, any help highly appreciated!!

Thanks & nice holidays to everybody,

Andreas

Just a follow up regarding my post above: I switched to the jQuery Accordion which worked better for my flash movies in Safari (actually, I’m now using an older version, the one by “bassistance.de” also uses divs for the mark up). So, all good, no need for help anymore.
Greets

Andreas

Its very easy to use. thanks for sharing

Its very easy to use. Thanks for sharing. Keep on going

Stupid Simple Accordion indeed. Thanks a lot!

I read through most of the comments but I can’t seem to find the answer. How do you keep an accordion stay open upon page change? The opened accordion should be the one that the user previously clicked.

Thanks for this, I went through so many complex solutions to this before finally coming across this one which I could actually figure out.

Also, thanks for posting a way to have the menu close again on click.
Just what I was looking for!

really a stupid n simple jquery accordian Menu.
thanx for sharing it…

Great script. Easy to use and practical. My kudos!

I have this scenario and I would like your help: when I click in a link in the content (that loads another page of the site), the same menu unfolds again. I would prefer though to avoid having the menu unfodling for a second time (to get rid of the animation when it reloads). Is it possible?

Thanks for the great script! anyone have a quick way to add a show/hide all button to this function? Trying to figure it out myself to no avail yet…

Awesome! thanks for the help Ryan, works great!

Thanks so much for this quick/easy solution. I’ll definitely be saving it in my “little bag ‘o tricks!”

Hi i think it’s better to use slideToggle instead of slideUp or slideDown.

Thanks for the simplicity.

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {

if($(this).next().is(‘:visible’)) {
$(this).next().slideToggle(‘normal’);
} else {
$(this).next().slideToggle(‘normal’);
}
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();
});

Sorry, the solution is :
$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideToggle(‘normal’);
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();

});

How do you make the panels slide right or left instead of up and down?

so smooth…aw…aw…aw thanks

Anyone have any ideas on how we can make the button have a double function? So it can link and drop the accordion down?

THANKS FOR MAKING SOMETHING STUPID SIMPLE.

I am always overwhelmed and a tad confused by those who do something the LONG way.. like long division.. what’s the point?

Anyways.. I am VERY happy and have used your script here if you wanna see it:

http://96.9.157.245/~rrochlin/offices/

Great little script!

As someone mentioned above, it seems to have a problem with images in the content. Removing padding doesn’t help the problem. It works fine in ie 7, but not in firefox it moves very jerky.

Anyone solve the problem?

solved the problem by removing a nested div in the content div.

Has anyone been able to combine a button rollover effect with the code for changing the class of the accordion button when it is selected?

This code:

$(‘div.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
$(“div.accordionButtonSelected”).removeClass().addClass(“accordionButton”);
$(this).removeClass().addClass(“accordionButtonSelected”);
});

Needs to be combined with this code:

$(“div.sidenavOff”).mouseover(function(){
$(this).removeClass().addClass(“buttonOver”);
}).mouseout(function(){
$(this).removeClass().addClass(“buttonOff”);
});

but it’s too difficult for me.

Hey Ryan,

Thanks a ton for this script… I’m having a problem with your latest version. It doesn’t seem to work right in IE8. Seems to work ok in 7 though.

What happens is when you click on a header, all of the accordions flash partially open, then close.

Just FYI.

Found your script yesterday, and you updated it just after I downloaded it!

There is one fatal flaw in this wonderful script – if javascript is disabled, all the contents remain hidden.

I haven’t yet learned JQuery (it’s on my todo list, of course), but I do know what the solution is.

Start with the current accordianContent div named something different – noAccordian perhaps. The styles for noAccordian should be identical to those of accordianContent, minus the display:none;

On loading the page, use Jquery to immediately rename every noAccordian to accordianContent.

Magic – the contents are now visible to those poor fools who have javascript disabled, and the page is usable for them. While the enlightened users with javascript enabled, get the accordian effect.

I know you can write the single line to do this.

Hi

I am doing a portal now.

I was trying to use this accordion there.

I am unable to use forms in Accordion panels. I can only add texts now! I actually want to place some forms in each accordion panel sections. Is there any way, I can add Tables or Forms in Accordion section. Kindly help.

If not, please help me how to use forms in collapsible panels.

Thanks

Sadu

Ryan,

Your update still doesn’t seem to work in IE8. I wish I knew more jQuery (or “any” for that matter) to help troubleshoot what might be going on.

Thanks again. This script is a life saver.

Sorry Ryan, my bad. The images weren’t causing the problem. The div they were in, was. All sorted now. And your new version is exactly what I was looking for.

BTW, in your original version, the content re-opened itself when the same button was clicked again. Your new version has the accordion close up. How do you prevent it from doing that?

Great tutorial. Thanks a lot!

Very simple and good tutorial. Thanks a lot!

OK i am having a really bizarre thing happening here in internet explorer (otherwise it works perfectly)

IF you go here:
http://96.9.157.245/~rrochlin/offices/

and view in IE 7 or 8 you can use the top two, but the bottom three only open by 1px, not all of the way. WHy is this happening??

I have a question. Is it possible that upon loading, the top content box will load open and then close/function normally after one has clicked the other tabs? I have a space on the website and I’m trying to have it look full. With all the tabs closed it doesn’t.

Here’s an example of what I’m talking about:

http://www.seagate.com/www/en-us/

Thank you for this terrific script.

Hey, thank you!
I found too many others that were disorganized and explosive. You saved me! Cheers!

Thanks for this! I have tried to use the id=”open” on the newer version and I find that it breaks the accordion, and opens all of the divs. I can easily make the old one work with the code you link to, but my javascript skills are not to the point I can troubleshoot others code.

Is there any chance you can post a “leave open” version of the newer code?

Sorry to be difficult! I really appreciate your supporting this and your work for those of us who can’t code for jquery for ourselves!

Thank you so much! It works a treat now, I’m just creating a WordPress plugin for it, for some sites I’m working on. Thanks for your work.

@Ryan

Thank you. Worked to perfection. You are a god!

Hi there!

Thank you for sharing this. It has been a great help!

I do have a problem, however.

I am trying to take this menu I have created in a separate page with your code:

http://smallernst.com/DELINEAR2/list.html

…and implement it in this page:

http://smallernst.com/DELINEAR2/DUMMY.html

…replacing the menu on the top right.

The menu I am seeking to replace is currently in a . I am a novice and do not know how to use your code effectively within these existing parameters.

Any help you could give me would be so wonderful!

Forgive me: the code did not show up in my last comment.

I meant to say that the current menu is in a “header right” div class.

hi ryan. awesome script and saved me a lot of time!

i have one question according to martin (october 17, 2009) above:

Is there a way to make the page scroll to the top of the opened accordion item automaticly (when clicked only, not on page load)?

I got a shorter item under a long item so when the long one closes and the short one opens then the short one vanishes and I have to scroll up to see it. So a auto scroll to the top of the newly opened item would be awesome.

thanks a lot
tobi

Thanks a ton for this code! Works GREAT. I have a stupid question though…

How can I link to an open panel? Another words how can I click a link on one page and have it go to the page with panels and open a specific panel.

So sorry, kindof new w/jscript…

Thanks again!!!

Tom

Hey guys,

Can anyone tell me how to use this for a wordpress theme? I am building one that needs a simple accordian for the side navigation bar.

I know how to call the pages in the sidebar page, but how can I make it to dynamically add subpages, etc.?

Thanks!

Brilliant. Love it!

@Ryan Stmkoski

First, thanks for the help with the new file that starts with an open div.

I created a wordpress plugin that uses your code, but I have an odd jump at the end of the slide open effect. You can view it here http://www.drrichardgregory.com/services/ I will make this available to anyone who wants it once I get the strange jump fixed. I added some CSS to fit my site and I’m not sure if that adds the jump. Maybe I need to use paddings instead of margins? Not sure.

@Tom recently asked a question about linking to an open accordian panel…I am also wondering how (or if) I can link to an open panel from another page?

Thanks a bunch!

Dan

Hi,

Thanks for the excellent script. I am using 4 different images as my accordion buttons and wonder is it possible to have the images change for hover & active.

Would be great to hear back from you.

Thanks,
Andrew

Thanks Ryan

I still don’t really get it….any extra help you could give would really be appreciated.

http://www.thepool.ie/test/

That’s the address of the site…basically all I want to do it change the open accordian button to a darker image.

If you could help that’d be great.

Ryan,

I have the basics working just fine but I have one issue. I am using the accordion as my menu and when click on the links (to open in the content area of my page) I don’t want the accordion to close. I would like it to remain how it was before I clicked the link. Any ideas?

Thanks,
Cameron

Is this script free to edit and use wherever?

Thank you very much for the reply. I’ve tryed everything to get this link to open a panel but it will not work.

Link Code:
panel 3

Here is the JS on the panel page:

$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$(‘.accordionButton’).click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$(‘.accordionButton’).removeClass(‘on’);

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$(‘.accordionContent’).slideUp(‘normal’);

//IF THE NEXT SLIDE WASN’T OPEN THEN OPEN IT
if($(this).next().is(‘:hidden’) == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass(‘on’);

//OPEN THE SLIDE
$(this).next().slideDown(‘normal’);
}

});

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton’).mouseover(function() {
$(this).addClass(‘over’);

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over’);
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/*CLOSES ALL S ON PAGE LOAD*/
$(‘.accordionContent’).hide();

//WHEN CLICKING ANY ELEMENT WITH ID #open_panel THE 3RD ACCORDION PANEL OPENS
$(‘#open_panel’).click(function() {
$(‘.accordion_content’).eq(2).slideDown(‘normal’);
});
});

Any ideas?
Thanks again!

I want to ask, can you create a function the enables the links within the accordion panel to stay open after it is clicked.

I want to ask, can you create a function the enables the links within the accordion panel to stay open after it(links within the accordion panel) is clicked.

@Rob and Ryan Yes that is issue as well. If i click a link inside the accordion it then opens the the link in my content area but returns my accordion to the default settings. I would like the accordion to keep the active pain, where the link was located, open.

Yeah, that’s how I had it setup. I just copied my code here wrong.

So will that work from a different page or will the link only work if it’s on the same page as the panels?

Thank you so much for your time. I want to use this as my accordion standard…

Take care,

Tom

Has anybody figured out how to have different background images for active buttons?

Thanks.

Site above is one that I used different background images. Is this what you’re looking for?

Sort of, except I need to have a different background image for each button.

http://www.thepool.ie

I need the header image of the selected tab to be a different image.

Kindly check this one above:

“Comment by Alan Earl on December 10, 2009 @ 6:14 pm”

This is how to change images of button.

Hope it can help u….

@Ryan,

I didn’t hear back from you so I created the plugin with it’s flaws and everything. It’s available as a download
http://www.greenermountain.com/2010/05/s-simple-accordion-wordpress-plugin/

Let me know what you think!

@Alan Earl

I can only figure out how to use your method to change the image so that it’s only got on on/off state for all buttons.

I want each button to have it’s own separate on/off image.

Do you know how to achieve this?

Thanks again,
Andrew

Thank You!

Question, how will search engines handle the content? I am using for considerable amounts of text, not menus.

My image button has a class of div.accordionImage

Therefore just create another class for your new image button.

class div.accordionImage
$j(‘div.accordionImage’).css(‘background-image’,’url(style/images/button1.png)’);

class div.accordionImage2
$j(‘div.accordionImage2’).css(‘background-image’,’url(style/images/button2.png)’);

soo on…

I got it working, using a slightly different method to @Alan Earl in the end

I placed the images inline like so

[div class="accordionButton" style="background-image: url(images/work2.jpg); height: 85px; width:400px;"]

where the image work at the off state at the top and the on state at the bottom

then I changed the .on css to

.on {
background-position:bottom;
}

So I could use a different image for each button.

Thanks @Alan Earl & @Ryan for all the help.

I got the header to change on select and then back with this:

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘h4.hdr’).click(function() {

if($(this).next().is(‘:visible’)) {
$(‘div.txt’).slideUp(‘slow’);
$(“h4.hdrOn”).removeClass().addClass(“hdr”);
$(this).removeClass().addClass(“hdrOff”);
} else {
$(‘div.txt’).slideUp(‘slow’);
$(this).next().slideDown(‘slow’);
$(“h4.hdrOn”).removeClass().addClass(“hdr”);
$(this).removeClass().addClass(“hdrOn”);
}
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.txt”).hide();
});

CSS:

.hdr {
cursor : pointer;
color: #606060;
}
.hdrOn {
cursor : pointer;
color: #987673;
}
.hdrOff {
cursor : pointer;
color: #606060;
}

hdr = accordionButton

txt = accordionContent

Works in FF & IE as far as I can tell.

And you can see it here:
http://www.frankjamesfisher.com/viewsnews.php

After thinking about it (Doh!) I don’t need the extra off class:

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘h4.hdr’).click(function() {

if($(this).next().is(‘:visible’)) {
$(‘div.txt’).slideUp(’slow’);
$(“h4.hdrOn”).removeClass().addClass(“hdr”);
$(this).removeClass().addClass(“hdr”);
} else {
$(‘div.txt’).slideUp(’slow’);
$(this).next().slideDown(’slow’);
$(“h4.hdrOn”).removeClass().addClass(“hdr”);
$(this).removeClass().addClass(“hdrOn”);
}
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.txt”).hide();
});

CSS:

.hdr {
cursor : pointer;
color: #606060;
}
.hdrOn {
cursor : pointer;
color: #987673;
}

hdr = accordionButton

txt = accordionContent

Works in FF & IE as far as I can tell.

This will fix the bugs with IE6 and IE7 where the images are revealed before the slider effect happens.

[code].accordionContent { width: 900px; float:left; display:inline; position:relative; }[/code]

Thank you and love your work on this, but one issue:

In order to allow multiple boxes to stay open, you recommend deleting this line:
$(‘div.accordionContent’).slideUp(‘normal’);

But when doing so, boxes no longer close by clicking the accordionButton. Any ideas on how to re-enable that feature? Think it was lost in the updated version. Thanks again!

Im having a problem with this script, the accordion works as it should, but it doesnt push down the rest of the content on my page, its like its flowing on top of my site if you know what I mean.. I dont know whats going on here. has anyone else experienced this problem?

nevermind my previous post! Im stupid, didnt have an overflow:auto on that div. Thanks for a great little script!

This is exactly what I’m looking for. Thanks for your simplicity!

Could anyone tell me how to remove the “pushing” effect from the buttons?

Let’s say I’ve got 10 buttons with a margin of 20px between them. Now, when I open the first one all the buttons under that one get pushed together (losing their margin).

Would there be a way to get rid of this?

Hi Ryan, any chance you could address the issue about needing elements to stay open? (sorry to bug, I asked a few comments up but got no reply)

—-

In order to allow multiple boxes to stay open, you recommend deleting this line:
`$(‘div.accordionContent’).slideUp(‘normal’);`

It works, but in doing so, boxes no longer close by re-clicking the accordionButton. Any ideas on how to re-enable that feature? Think it was lost in the updated version. Thanks again!

No prob! Again, really dig this script.

I’m using the updated version. Example:
http://stteresasf.org/wordpress/home/map-and-directions

JS at:
http://stteresasf.org/wordpress/wp-content/themes/st%20teresa parish/scripts/jquery.accordion.js

FYI using wordpress for this example but it’s not a plugin or anything, I noticed the same issue on a non-CMS site too.

Thank you!

:/ Note that I messed up the second link up there, missed giving ‘%20′ to a space in the url…

It sure does! Thank you Ryan!

Hello and many many thanks for this really simple script for stupids!!
using DIV screwed up my web page layout !
Replacing DIV by SPAN cured the probleme like a charm!!

I would like te reiterate a user request here:
http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/#comment-23192
Is there a way to make the page scroll to the top of the opened accordion item automaticly (when clicked only, not on page load)?

I got a shorter item under a long item so when the long one closes and the short one opens then the short one vanishes and I have to scroll up to see it. So a auto scroll to the top of the newly opened item would be awesome

THANKS

Hi,

Is it possible to control how the accordion opens with a link that’s inside the content section?

For example, in htttp://www.thepool.ie if I click a link inside the COLLAB content section it would open up a the WORK section.

Thanks,
Andrew

Hey Ryan,

That’s not working for some reason.

I have it online here http://www.thepool.ie/V2

There’s a link called panel 3 in the CONTACT section that’s not doing anything.

Any help would be great…thanks.

Hi ryan, thanx so much for this!!!!

i was wondering if you could help me, i’m really stuck:

- how can i place an image that will be my button to open/close de divs AT THE BOTTOM of the text (even when the div expands).

- how can i make my image button to change when it’s opened?

i would really appreciate any help!

thanx!
best,
jva

Nice tutorial;)

Hey,

Has anybody got a solution for the question above? I need to get it sorted as soon as possible.

Thanks.

@jva

The best thing to do if you want the image to be like a button is to make the image as a hyperlink.

Problem solve….

Absolutely the best accordion tutorial!!

Stemkowski, you had written before a code to expand menus on load, is there a possiblity to get it without the effect of sliding? Every time I refresh my page I can see the effect of sliding which I would like to avoid. Help is much appreciated!

That worked great….thanks Ryan

@Stemkoski Appreciate your help! God bless you

Tks for the script, but i dont know why, every time that I put some tags, the accordion makes a jump at the bottom

tks for advance

Great script Ryan!

It would be better if it also support persistent cookie which also currently missing in jQuery UI

Hi, thanks for the nice script but can plz guide how can i use arrows on left and it change the direction (arrow) when i click the accordian tab.

@Prathap

<script lang="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
 
/********************************************************************************************************************
SIMPLE ACCORDIAN STYLE MENU FUNCTION
********************************************************************************************************************/
$j(‘div.accordionButton’).click(function() {
 
/* Check Accordion if Visible */
if($j(this).next().is(‘:visible’))
{
$j(‘div.accordionContent’).slideUp(‘fast’);
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
}
else
{
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’); 
 
$j(‘div.accordionContent’).slideUp(‘fast’);
$j(this).next().slideDown(‘fast’);
 
/* Check selected accordiontitle to text hide */
$j(‘div.accordionTitle1′,this).text(“Hide”);
$j(‘div.accordionImage’,this).css(‘background-image’,'url(style/images/close.png)’); 
 
}
});
 
/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$j(“div.accordionContent”).hide(“fast”);
 
/********************************************************************************************************************
SET div to text HIDE
********************************************************************************************************************/
$j(‘div.accordionTitle1′).text(“Learn More”);
$j(‘div.accordionImage’).css(‘background-image’,'url(style/images/check.png)’);
});
</script>

html

Button 1 Content
Content 1Long Example
Button 2 Content
Content 2Medium Example
Button 3 Content
Content 1Short Example
Button 4 Content
Content 4Extra Long Example

Hope it can help u! it will switch check/wrong picture per accordion click.

Thanks! Exactly what I needed. Simple, straight forward and works like a charm

Great website, superb work…

Thanks

Hi all,
Thank you SO much for this stupid simple accordion that even I got to work!

I’ve been trying to alter it according to Alan Earls great comments, and I now got it to work so that it closes on the second click and also that the background image changes on click.
However, I have, like Sue in the comments above, not been able to figure out how to get the background image to change back to the original image once the button is closed again.
I tried Alans suggestion to Sue above, but I’m really new at this jQuery stuff, so I didn’t get it to work…

Also, my stuff underneath the accordion won’t get pushed down when the accordion opens. It just sits on top of it. I guess it’s a css thing? Do I need to put all the content underneath in the same div as the accordion wrapper?

Here’s my jQuery:

var $ = jQuery.noConflict();
$(document).ready(function() {

/********************************************************************************************************************
SIMPLE ACCORDIAN STYLE MENU FUNCTION
********************************************************************************************************************/
$(‘div.accordionButton’).click(function() {

/* Check Accordion if Visible */
if($(this).next().is(‘:visible’))
{
$(‘div.accordionContent’).slideUp(‘fast’);
$(‘div.accordionButtonSelected’);
$(‘div.accordionImage’).css(‘background-image’,'url(img/plus.png)’);
}
else
{
$(‘div.accordionButtonSelected’);
$(‘div.accordionImage’).css(‘background-image’,'url(img/minus.png)’);

$(‘div.accordionContent’).slideUp(‘fast’);
$(this).next().slideDown(‘fast’);

/* Check selected accordiontitle to text hide */
$(‘div.accordionButtonSelected’,this);
$(‘div.accordionImage’,this).css(‘background-image’,'url(img/plus.png)’);
}
{
$(“div.accordionButtonSelected”).removeClass().addClass(“accordionButton”);
$(this).removeClass().addClass(“accordionButtonSelected”);
}

});

/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$(“div.accordionContent”).hide(“fast”);

/********************************************************************************************************************
SET div to text HIDE
********************************************************************************************************************/
$(‘div.accordionButtonSelected’).text(“Learn More”);
$(‘div.accordionImage’).css(‘background-image’,'url(img/plus.png)’);
});

Hi,

First of all, great simple tutorial, I almost used the jquery UI accordion, fortunately, I found this!

I’ve implemented the tweak to have one item open on page load, using the #open technique, the problem with that is that the “accordionButton” doesn’t get the “on” class, so although the item is open, the header doesn’t suggest that it is.

Is there a quick fix for that?

Cheers.

Scrap that! I’ve just realised I can hard code the “on” class when I add the #open ID to the div, because the JavaScript will remove it when I click on something else…

Silly me!

I really like this script and have made it work except for one little issue that I was hoping you could help me resolve.

Following the accordion I have a footer div that I would like to always remain at the bottom, which needs to expand to remain at the bottom. Right now it just wants to remain immovable under the element prior to the accordion. I have tried everything I can think of to make it dynamic.

Any suggestions?

Hi all,
I have a problem with joomla/virtuemart accordion menu.
It need to stay opened on page category load.

This is code:

setQuery( $fetchCatQuery );
$fetchCatRow = $database -> loadObjectList();
return $fetchCatRow;
}

function recursiveCat($catID) {

$database =& JFactory::getDBO();

$fetchChildCat = “SELECT category_child_id FROM `#__vm_category_xref` WHERE category_parent_id = “.$catID;

$database->setQuery( $fetchChildCat);
$fetchChildCatRows = $database -> loadObjectList();
$Itemidmod = JRequest::getVar(‘Itemid’, ”);
if (!empty($Itemidmod)) {
$Itemidmod=’&Itemid=’.$Itemidmod;}

if (count($fetchChildCatRows)>0) {

unset($childCatInfo);

echo “”;
foreach ($fetchChildCatRows as $rows) {
echo “”;
$childCatInfo = get_cat_info($rows->category_child_id);
echo “category_id.”&Itemid=”.$Itemidmod.”‘>”;
echo $childCatInfo[0]->category_name;
echo ““;
recursiveCat($rows->category_child_id);

echo “”;
}
echo “”;

}
return;
}

function category_tree($catType=1) {
global $database;
$database =& JFactory::getDBO();

if ($catType == 1)
$fetchParentCat = “SELECT category_id, category_name FROM #__vm_category”;
else
$fetchParentCat = “SELECT category_id, category_name FROM #__vm_category”;
$database->setQuery( $fetchParentCat);
$fetchParentCatRows = $database -> loadObjectList();
foreach ($fetchParentCatRows as $fetchParentCatRowsInfo){
recursiveCat($fetchParentCatRowsInfo->category_id);
}
}

function checkParCat($catID) {
global $database;
$database =& JFactory::getDBO();
$fetchParentCat = “SELECT category_parent_id FROM `#__vm_category_xref` WHERE `category_child_id`=”.$catID;
$database->setQuery( $fetchParentCat);
$fetchParentCatRows = $database -> loadObjectList();
return $fetchParentCatRows[0]->category_parent_id;

}

function displayChildCat($catID){
global $database;
$database =& JFactory::getDBO();
$fetchParentCat = “SELECT category_id, category_name FROM #__vm_category WHERE `category_id`=”.$catID;
$database->setQuery( $fetchParentCat);
$fetchParentCatRows = $database -> loadObjectList();
foreach ($fetchParentCatRows as $fetchParentCatRowsInfo){
recursiveCat($fetchParentCatRowsInfo->category_id);
}
}

function category_list() {
?>

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(‘div.accordionButton’).click(function() {
jQuery(‘div.accordionContent’).slideUp(‘normal’);
jQuery(this).next().toggle(‘slow’).addClass(‘aktivna’);
//alert($().length + ‘ elements!’);

return false;
});

jQuery(“div.accordionContent”).hide();
jQuery(this).next().toggle(‘slow’);
jQuery(‘div.btn_women’).click(function() {
jQuery(‘div.leftmain’).toggle(‘slow’);

});

});

addScriptDeclaration($script);

global $database;
unset($loop);

$database =& JFactory::getDBO();
$fetchParentCat = “SELECT category_id, category_name FROM #__vm_category”;
$database->setQuery( $fetchParentCat);
$fetchParentCatRows = $database -> loadObjectList();
$loop=0;
foreach ($fetchParentCatRows as $fetchParentCatRowsInfo){
if( checkParCat($fetchParentCatRowsInfo->category_id) == 0) {
$loop++;
echo “”;
echo “”;
echo “”;
echo “category_id.”‘ style=’color: #006699; text-decoration: none; ‘>”.$fetchParentCatRowsInfo->category_name.$Itemidmod.”“;
echo”";
echo”";
echo “”;
echo ”;
echo ”;
echo displayChildCat($fetchParentCatRowsInfo->category_id);
echo ‘
‘;
echo “”;
echo “”;
}
}

?>

// alert(“”);
document.getElementById(“accCont”).style.display = ‘block’;
//document.get(“category_id=”);

<?php

}

category_list();

Any idea how to solve this?

Cheers

Love this accordion, worked perfectly. I also had an easySlider 1.7 working perfectly, until I put the easy slider inside the accordion (I want to have a series of sliders in an accordion menu for viewing photos) and all the images disappeared, although the sliders are still there. Is there something I can do to make this work?

Thank you

Nobody who can help..?
I’ve ALMOST gotten it to work now, but I still don’t get how to get the minus to change back to a plus sign when you close it.
Also, the right column opens up on top of the stuff underneath. I want it to act like the left column that pushes the other stuff down…
The html: http://www.brakropp.se/NY/tjanster.html
The css: http://www.brakropp.se/NY/css/brakropp.css
The java: http://www.brakropp.se/NY/js/accordion.js

see this in action in http://www.mineralmed.com.pt

tnks for this script, it help me a lot, i made this dynamic, the script was build in c#.net.

i want to know your feedback.

Tnks a lot.

@Em, I think your minus not changing back issue is something to do with you not utilising the “on” class addition, but using AccordionButtonSelected or something. You should style up accordionButton and then style “on” separately and add “on” with the javascript while still keeping “accordionButton” as a class too. Then style “.accordionButton.on”

I think that’ll work. Works for me anyway.

The column problem is (I think) a float issue and the fact that your accordion wrapper doesn’t close at the end of the accordion, so you can’t clear anything.

Great simple script! A big thank you from a humble designer

Was wondering if you have a version where I can toggle an up or down arrow image instead of the whole header? Reason being is that I have other buttons appearing in the header. Also, how do I apply this to nested headers that also need to expand and collapse within a main collapsible header? Thanks again!

Hi to all.
Thanks for this great and very simple accordion plugin.
I have almost get it to work with background images.One for the .accordionButton class one for .over and one for .on.The only problem i have is that when i rollover the header ,it is changing to the hover class but when i click on it and the div is expanding ,the style does not change to .on until i get the mouse off the header.Any help to solve this problem?
.js
…..
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton’).mouseover(function() {
if (!$(this).hasClass(‘on’)) $(this).addClass(‘over’);
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over’);
});
…….

css.
…..
.accordionButton {
width: 152px;
float: left;
_float: none;
cursor: pointer;
background-image: url(lpanel-header.gif);
height: 31px;
}
.on {
background-image: url(lpanel-header_active.gif);
background-repeat: no-repeat;
}

.over {
background-image: url(lpanel-header_hover.gif);
background-repeat: no-repeat;
}
$(‘.accordionContent’).hide();
$(‘.open’).trigger(‘click’);

Thank you

To my last comment.
I had to add the following line in the click function:$(this).removeClass(‘over’);
The full working js code now is:
$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$(‘.accordionButton’).click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$(‘.accordionButton’).removeClass(‘on’);

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$(‘.accordionContent’).slideUp(‘normal’);

//IF THE NEXT SLIDE WASN’T OPEN THEN OPEN IT
if($(this).next().is(‘:hidden’) == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass(‘on’);
$(this).removeClass(‘over’);
//OPEN THE SLIDE
$(this).next().slideToggle(‘slow’);
}

});

/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton’).mouseover(function() {
if (!$(this).hasClass(‘on’)) $(this).addClass(‘over’);
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over’);
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//z
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$(‘.accordionContent’).hide();

/**************************************************************************************************************
OPEN THE ACTIVE ITEM
*************************************************************************************************************/
$(‘.open’).trigger(‘click’);

});

thank you a lot again for the great plugin.

Great Script. Following on from the comments about controlling the accordion from a link, is it possible to control what div opens from a link on an external page? eg I have a menu on one page where all links link to the page with the accordion – I would like this page to load with the relevant div open according to what link they clicked.

Thanks in advance.

Hello,

Great menu! I’m using the menu to display content. Some of the content expands the page, requiring the user to scroll. Is it possible to make the web page focus to the item that gets opened rather than having to scroll up.

Thanks

Hi there. Been having some trouble with having the div expand.
http://www.truthv2.com/religion/bts.html

Hello,

Really great script. I’d like to ask if there is a simple way to leave divs open after clicking next one or in other way. I don’t want to hide previous panel if i click next one. I managed to this by commenting this line:

//$(‘div.accordionContent’).slideUp(‘normal’); (below is full script)

but when i click again on any open panel all hide instead onlu the one I clicked.

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {
if($(this).next().is(‘:visible’)) {
$(‘div.accordionContent’).slideUp(‘normal’);
} else {
//$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

$(“div.accordionContent”).hide();
$(“#open”).trigger(‘click’);
});

Thanks in advance

this is probably the best implementation i’ve seen!

would you be able to incorporate an “expand all” and “collapse all” that activated by a link?

Ryan,

I just left you a comment above about “expand all”, etc… but I took the time to read all your comments!!

So, I saw a viewer by the name of Tobi, on April 24, asked about the “scrolling” issue. It looks like he never responded, so I put together a demo for you to demonstrate what he is referring to and it’s something I’m also looking for, too…

As you can see, after you click Title 1, watch it expand and scroll to Title 1 using a simple standard scrollTop I added. Now, when you click on any other Title, it will scroll of the page.

My demonstration: http://jsbin.com/anuzi3/5/

Now, I found this website (http://www.pelmeshkin.com/) has mastered the “scrolling” technique we’re looking for by finding all the positions of the clickable elements on pageload using offset(), then puts them in array, and feeds these as pixel values to scrollTo on click event, giving scrollTo exact pixel positions to scroll to on the page, rather than rely on it to calculate it from element ID by itself.

- Evan

I may have missed it in here somewhere, but is there an easy way (without duplicating/renaming code) to have two different accordions on the same page that function independently of each other?

question – do you think something like this could be incorporate into your script for expanding all?

function toggle_expand_all() {
if ($(‘.expandable:first’).is(‘.expanded’)) {
$(‘.expandable’).removeClass(‘expanded’);
} else {
$(‘.expandable’).addClass(‘expanded’);
}
}

http://www.trickjarrett.com/blog/2008/10/14/jquery-expand-all/

I really like it man. We need guys like u to keep on learning. Thank u buddy.

Ryan – Here is a demo for your fans where I include an “expand all” and “collapse all”. It has a bug I can’t figure out though and that is when I click to expand all and watch them all expand, if I then click on a headline then all the answers will collapse. I’d like it to only collapse the one headline when I click it if they are all expanded. I think this is happening, because I need to add logic to not to this within the expand all collapse logic.

DEMO: http://jsbin.com/ucalu3/3/

Ryan – Thanks for your help with that and quick response! Here is an updated demo so people can play with and learn from…

http://jsbin.com/ucalu3/5/

Ryan,

I tried to take the Expand/Collapse a little further by making the text “Expand All” dynamically change to say “Collapse All” when clicked. Pretty cool idea, right?! I kinda thought so too until I ran into my next bug…

I thought lets try to simplify this and used “toggleClass” to swap the “active” class and use “slideToggle” instead of SlideUp and SlideDown when the Expand/Collapse was clicked. So far so good, it’s working great!

Well, I ran into an issue that I need your expertise on — again — In my demo, if you click “Expand All” then click a couple headlines, you’ll notice that when you now click “Collapse All”, the headlines you clicked previously will expand and the headlines you didn’t click will collapse. Perhaps that was my downfall for using the generic toggle attributes?

Do you have an idea on how to fix what I started?

Demo Here: http://jsbin.com/ucalu3/6/

Thank you again!

Ryan,

OK. I’ve abandoned the toggleClass / slideToggle attributes. That was just asking for trouble.

I’ve finished the code to have a dynamic expand/collapse link, but I have one small bug and I was at it all night just to get this far… I’m learning btw.

Scenario 1 Works. Click “expand” and it will change to “collapse”. questions and answers will expand and collapse accordingly and active state will swap appropriately. Click “Collapse” and everything will return to its original state. I’m very proud to get this far…

Scenario 2: Doesn’t work. Click “expand” and it will change to “collapse”. questions and answers will expand and collapse accordingly and active state will swap appropriately. THIS TIME — click on a ‘question’ or two, and now click on “collapse” and you’ll see everything expand. doah!!

What am I doing wrong?

Demo: http://jsbin.com/ucalu3/7/

Thank you Ryan! – Evan

Ryan,

I’ve finished the dynamic version just now for anyone out there who needs it. I plan to use this version for my own project. Here is all the source code.

Dynamic Expand/Collapse w/ Colors
http://jsbin.com/ehoci3/1/

Dynamic Version w/ Arrows
http://jsbin.com/ucalu3/8/

Manual Expand/Collapse w/ Colors
http://jsbin.com/ehoci3/2/

Manual Expand/Collapse w/ Arrows
http://jsbin.com/ucalu3/5/

Also, if you add this to the header of your html, it will enable all the content to expand so it’s printable. It’s really nice for people who print FAQs.

@media print {.accordionContent{display: block !important;}}

- Evan

Hello,

I have 2 sets of text within the Button Div- the main text and then a short description.

MAIN TEXT helper text

I would like for the onClick to toggle transparency for the “helper text”. (In the off-state I want it to be invisible)

.transparent
{
/* for IE */
filter:alpha(opacity=0);
/* CSS3 standard */
opacity:0;
}

Even better, is there a way to have 2 seperate classes for the On state and the Off state?

Ryan,

I’ve modified the code a bit more and I’m looking for some final assistance…

I’ve come to realize there’s an unintentional result occurring for the user within the “Expand All” sequence. When “Expand All” is clicked, it will expand all the questions and if the user should click a single Question, it will collapse by design correctly. Now, if the user should click the same question to view it again, it will actually collapse all the questions on the page.

Demo Issue: http://jsbin.com/ucalu3/8/
Step 1: Click “Expand All”
Step 2: Click a question
Step 3: Click same question
Unintentional Result: Question will expand, but all other questions will collapse.

I’ve resolved this issue here: http://jsbin.com/owebe4/
Step 1: Click “Expand All”
Step 2: Click a question
Step 3: Click same question
Intentional Result: Question will expand again and other questions will remain expanded.

The problem is, which is where I need your assistance, by me resolving the issue, it now removed the accordion effect when multiple questions are clicked when a user does not use the “Expand All” sequence.

Demo Issue: http://jsbin.com/owebe4/
Step 1: Click a question (don’t click “expand all”)
Step 2: Click a different question
Unintentional Result: The previous question did not collapse. This previous question should have collapsed.

Why I’m going to all this trouble is — if a user should click to Expand All the questions, there’s no reason why the user would want the questions to automatically Collapse All if the user clicks a question and then suddenly clicks the same question again. Collapse All should only occur when the Collapse All link is clicked.

Thank you again,

- Evan

Just letting anyone know. I had a problem in Chrome with the content flickering. It would show and then the background color would display over it. The problem was using the overflow:hidden property. I modified my CSS and that handled it.

Loved the simplicity of this. If I want to get complex with it in the future, you have given me the foundation to do so, but right now this was exactly what I needed to implement on a site I was working on and nothing else was working. Using this I got an A on my project too!

Thanks for this. It’s incredibly useful.

I don’t suppose anyone’s come across a jQuery script that combines an accordion-style menu with tabs? I want to replicate the Programs and Listen menus at npr.org but am having no luck finding a suitable script.

Have a look at slidedeck – http://www.slidedeck.com/ Not as simple as Ryan’s but not difficult either.

Hi Ryan,
Thanks man, your tutorial is simple and awesome. You have saved a lot of time and struggling for getting my vertical menu to work.

Keep on the great work!

Anders

Thanks for having this available, it works great!

Apologies if this has been answered already – I would like to have the button/menu state kept/remembered so that the same menu state is kept from page to page. Can you post some specific code that would address this?
eg. menu item is expanded, reveals links, link is selected – the expanded state is kept for the chosen page – consistent state is kept.

Thanks for your help

Great accordion, thanks for posting and maintaining it.

One question about the pinned version: if you click the button of opened content, it reloads its open animation. Can this be disabled?

Thanks.

Thank you for this. Really simple and easy to edit. Comments have also been very helpful.

Ha, this is a great approach to the accordion. Usually most implementations work on a basis. I really like this, I’ve used it loads. Thanks!

this was amazing thank you!
I had one question i did not see answered yet.
So i found out that when a tab is open, if you click it again it just reloads. is there a way to make it so that when you click the tab again it closes the tab?

This script is perfect, thank you!

Hi

Thanks for your tutorial. This is the best one I’ve come across so far.

Is there a way to have the open/close image next to the button so that when opening it will show the open image and when closing it will show the close image? Like the minimize/maximize button

Thanks

Simply perfect!

I modified it slightly to allow the user to close a just opened div by clicking again on the same ‘.accordianButton’.

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {

// if statement allows user to close a just opened div
if ($(this).next().is(“:visible”)){
$(this).next().slideUp();
{
else {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
}
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();

});

Is it possible to add to the script to preserve the menu state when navigating to a page with the same menu? Or alternatively to apply the ‘on’ class and execute the toggle function via tag?

I’ve been messing around with a couple scripts similar to this and have had great success getting it to work the way it was intended, but I’m attempting to figure out how to add in anchor functionality. So when an anchor is called directly through the URL it will activate the button hiding the anchored content.

I went back through the page and found an instance that discussed my quandary stating that one would need to employ a server side script to make this happen. I was wondering if you could make a hash call and run the script off of that onload or if you would still need a button or server side script.

var special = document.location.hash;

$(document).ready(function(){

$(special).addclass(“active”)

});

I know I’m missing a bunch to actually make what I’m looking at work, but is this idea even feasible? If so where would it be plugged into current code?

hi.

i use your script for my wordpress site. looks good but two litte problems…

- first i use for klickin’. when i click the link the # in the link will take me to the top of the page. is there a way to solve this effect?

- when i click a link in the submenu and the page loads all menus are closed. so the user didn’t know where he is. is there a way to let the submenu open and show the active point?

Just thought I’d say how incredible this is.

I’ve been trawling the new for hours looking for a simple accordion effect to integrate into my current project, but the majority of the ones available are too hard to understand to a beginner (like me) and have far too much going on.

What you have created here is so simple and so easy to understand. Seriously, cheers

Mike

Thank you so very very much!

Thanks for the script.

Sorry if this question has been answered already, but is there a way to check whether an accordion is currently open?

I’ve got a search button which opens the first accordion which holds my search results, and if the user clicks the search button again it closes the results.

I know I need to modify this line:
onclick=”$(‘#open’).trigger(‘click’);”
to a conditional statement of some sort, but I’m pretty new to this.

Thanks in advance for any help!

Answered my own question!

If anyone else is struggling with something similar then I used the following conditional statement on an onclick event:

if($(‘#open’).hasClass(‘on’)){
//nothing
} else {
$(‘#open’).trigger(‘click’);
};

Again, thanks for the script!

@Alex,@Ryan@Evan
Firstly, thank you so much for developing and sharing and continuing to develop this amazing script!
Secondly, I was hoping someone could help me figure out how to implement Alex’s idea.
My code is below but probably needs a little explaining (er, apologizing?)
I am generating the divs dynamically with a php/mysql script.
I am using Evan’s ‘manual with arrows’ script since I liked the arrows and the expand fully/close all features. It doesn’t, however, include the great #open feature of Ryan’s. so I added that line and it seems to work just fine.
I want to have the “open” id applied to one div as a default but that to be overriden by one requested by the user on a separate page (say index.php) I can capture the user’s requested div Content to display with php by doing:
which is the id of on of the accordionContent(s) In this way, the user can go directly to the content s/he wishes to see. For us, it’s to register for fairs and there are 40 or so to sift through. Thank you very much for any help/insights!
Here is the registration page script:

go to registration >

Hope this makes sense….

Ah, I see I do need to apologize- sorry – some of the code absented itself and the rest is a link. Not as intended…
I tried to capture the name of the accordionContent user wanted and pass that via the url to the page with the wrapper div and if the accordionbutton name was the same as the variable sent via the query string, then the content associated with it would have the id of open but it’s not working. My first div is the one that opens regardless of what that variable holds… Has anyone successfully done something like this that I could look at? many thanks. If it doesn’t work out I’m totally thrilled and thankful for this code!!!!

This is great, thanks!

I used your code to create a link on the page to open one of the accordion panels and reveal some content. I have noticed however that the “on” class doesn’t seem to work when I link to it this way. I’m a little new to this, could you give me an idea of how/where to fix this? I thought maybe I needed to use the if/else statement to add the class but I’m not sure how to make it add the “on” class to the particular accordionButton that is opening, rather than to the page link that is opening it.

Thanks.

Hi Ryan, lovely little accordion! Thank you for sharing.

I seem to be having a strange problem with it though.

My accordion is towards the end of the page and every time I click to open or close a section of the accordion the page jumps to the top and I have to scroll back down to where the accordion is. Weird. Any idea what’s going on??

Thanks again!

Haha!

I fixed it! Stupidly simple fix:

I had Title in the heading text for each accordion section. I just had to replace the “#” with “javascript:void(0);”

Thanks again for the code!

Oh and have a great 2011! : )

How about remembering which pane is expanded when you change pages. It is part of a MasterPage (.net) and used for navigation…

Thanks for this wicked simple script! I’m pretty new to accordion menus, and I’m psyched to have something like this on my new site (going to be live soon – check back in about a week!)

I’ll definitely have to post this page in my links section to give you proper props

Cheers!

Hi,
Can I make divContent open upwards rather than down?

Genial ! muy buen menu acordeon…
GREAT !
a good accordeon menu…
I have a question, Can I put 2 o more gallery inside to web page ?
I try but isn’t work…

Tks a lot.
Ivan

Great stuff. I have used this on a couple of occasions already.

I was wondering if there was a way to open specific “accordionContent” if it was away from the button? Let’s say the buttons were grouped together and the content were grouped together, see following:

Button 1
Button 2
Button 3
Content 1
Content 2
Content 3

Perhaps giving it a special id or something. Any help would be greatly appreciated. Thanx.

Thanks for this script, it really is simple.

I modified it slightly to accept links from anchors bot on the page and in the URL

I gave each accordionButton a name, each link has the class accordionAnchor, and also a name that corresponds to the accordionButton name you want it to open. I added this code:

$('.accordionAnchor').click(function() {
$('.accordionButton').removeClass('on');
var watchoo =$(this).attr('name');
$("div.accordionButton[name=" + watchoo + "]").addClass('on').next().slideDown('normal');
});


I had a hard time figuring out how to get the selector to parse a variable, so as soon as i got it to work I left it alone. I’m sure there’s a more direct route. I modified the version I’m using to leave accordions open when you click on another one, so if you don’t want that you’ll have to add the bit to close the others.

That took care of anchors on the same page, but not from external links, so I added this:


$("div.accordionButton[name=" + ((window.location.hash).substr(1)) + "]").addClass('on').next().show();


Again, had a heck of a time getting the hash converted into a string without the “#” attached, but that worked.

I hope this helps someone.

Ha, don’t follow the link on my name to see an example, that’s a different accordion right now.The version I tweaked isn’t deployed yet.

Simple things are always the best. thanks

This is excellent. Can you help me (or anyone) I want to use this accordion with a separate set of links that clicking on parts of will trigger opening specific accordion item.

Anyone out there any suggestions/examples?

Thanks!

This is just what a beginner needs!

I only have one button on my site the script works but when I try and close the one button it closes then re-opens. It never remains closed once it is open.

Any Help?

Thanks man!

very useful thanks for sharing

This is a great script. Thanks.

Question: Do you (or anyone here) know a way to trigger this on clicking a radio button? For example, lets say I have a form where shipping address loads showing, and under that is a question “Is your billing address the same as your shipping address?”. By default “Yes” (radio button) is selected, but if the user clicks “No” then the accordion would fold upwards (like above) and the form fields for billing address would show. If they click “Yes” again, it reverts.

Make any sense at all?

Hi! I implemented this and it works great (thank you!) but I’m having a problem with Firefox. In Firefox, the last accordion button slides behind the content below the accordion menu. Any idea what could be causing this?

Hi Ryan, thanks for your menu. i have manage to use it on a WordPress website inside posts.

how can i ad space between each button? should i work around CSS file? maybe with some spacing there?

Hi Ryan, This menu looks wonderfully simple, and I’ve read through all of the comments. I am in need of some function that a few people have asked for, and I didn’t really see a response except perhaps one.

Some folks would like to use the menu as also a navigation guide. So: I expand a section, click on a link in that section, and it takes me to a new page. I’d like that accordion section to remain expanded on the new page.

I think you said that might involve more complicated javascript or PHP, and I’m wondering if you or any one else has a way to go about that, or some direction on how to do it.

Thanks!

I’m working on a web app at work for a windows mobile 6.5 handheld to access and I need to restrict access to all other web sites except this app. I’ve never used JQuery before so i might just be new, but with the first step you mention getting the library from google. I’m assuming I wouldn’t be able to do that if google was a restricted site right? Is there another way to do that?

Thanks!

Why don’t you embed the library to your application?

Ryan,

I appreciate the effort you took to take this public; it is greatly appreciated.

I have reviewed all of the posts and I did not find a question/answer to this: is there an easy way to incorporate a sub-level accordion so that when you click the first level, there is a second level “accordion”?

I find the accordion useful for displaying info for mobile users.

Thanks again!

Ryan, this is a really nice and easy to use script. But I have a question:

I want the first tab to be open when i go in to the website, and when i press another tab the first one closes and so on. So I only got one tab open at a time, if you or anyone else could help me with this, I would be greatfull.

Thanks

Okej, never mind. I just had been sitting to much at the computer I forgot to check it first.. Thanks for the script, hehe.

Okej… sorry again, I still want to know how the first tab can be open from page loadup (start). Then closes when i press anotherone

Well Ryan I did that, and I couldnt find what I was looking for. Atleast not well enough for me to understand, could you help me?

I’m having problems with IE7, when hidden content is revealed it doesn’t push bottom element but it overlaps it.

I’m banging my head for two days and I can’t fix it. Please help! You can see it here: http://bit.ly/eTF2wT

Thanks.

I gave every element inside accordion float:left and still no success. I also tried to remove float from main element, but result is the same.

Probably the trick is in floats, but I just can’t figure it out where exactly.

Ok, I solved it, there was an IE CSS hack in my template that I overlooked.

I am trying to use image maps to control the buttons because the buttons for my menu are in the shape of a wide-set V. In the usage, you have a div with a class of “accordionButton” controlling the action. Is there a way to simply get the area of the button for the image map to control the action? I thought maybe just changing the “div.accordionButton” to something like “area.accordionButton” would work but it doesn’t do anything (can see the small change below).

—————————————-

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘area.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideDown(‘normal’);
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();

});

—————————————-

I hope you can help! Thanks!

Hello!
Thanks Ryan Stemstosky for this tutorial, it is very simple to use and it worked right away even after i changed it to work with an unordered list instead of divs.

I just wish i had the idea of searching for a accordion that is stupid simple to use when i first googled for one.
Once again thanks!!

Kudos for keeping it simple! I’ve spent a lot of time looking for something quick, easy, and customizable.

If you’re taking requests though, a stupid simple vertical accordion would rock! Where the panels slide from left to right (or right to left), a la this minus all the fluff.

Hi Ryan,
First off, thanks so much for this script! I have killed so much time over the past couple days experimenting with various scripts that were over complicated and still wouldn’t work for me. This is the simplest script I’ve found and it WORKS!

Secondly, I do have a quick question and it’s probably a blatantly obvious answer but since I’m new to jQuery, I hope you won’t mind answering this for me! I would like to have 2 separate accordions independent from one another. My problem is that I’d like to be able to have the first header on each accordion open at page load. I saw your response above about creating an #open id which triggers the header at page load. This works great, however when the page opens, you see the header on Accordion #1 open and close really fast and then the header on Accordion #2 opens and stays open. This happens with the following code which contains the 2 separate id’s I created for the 2 accordions.

$(“#open, #open1″).trigger(‘click’);

How do I create these accordions so they work independently? I’d like viewers to be able to have a single header open on each accordion at the same time instead of clicking on Accordion #1, then when they click on Accordion #2, Accordion #1 closes up.

Hopefully this makes sense! Thanks much for your response.

Love this super simple accordion. However, because I’m not good at jQuery I needed some help. Currently when you load the accordion menu, all items are closed which is great. But, how would I be able to keep the first accordion open, when button 1 is clicked? And how would I be able to keep it open if a link within the buttonContent is clicked? Any help would be great. Thanks in advance!

Is there no way to get this to work with image maps?

@ryanstemkoski – need it too stay open when clicked, but closed when another link outside of the first accordionButton is clicked.

When accordionButton1 is clicked, it opens. When a link within accordionButton1 is clicked, it stays open until accordionButton2 is clicked.

(hope that’s not confusing)

From an earlier comment, I saw that this code was used for keeping the accordion open on load: $(“#open”).trigger(‘click’);.

How would I translate this to do it for all the buttons>

Hi Ryan,
You responded to my question a while back, and I wanted to say thank you. Unfortunately my client changed his mind how he wanted the menu to function so I had to just use CSS. I will definitely keep this great menu in my arsenal for the future.
Thanks again.

I’m commenting about for more info you supplied above for @Kristin.
I need exactly what she requested and you responded with. I added that line of JS code in the header but nothing happened.
I’m building a page and I have the menu working “as is” at http://www.partyinvitationboutique.com/test/
I’d like to get that menu to stay open when the user is inside that category. I built the site using a template so I don’t want to have to add a separate line of code in the header for each dependent page. Wonder if you can help me over this last hurdle. It would be easier for users on my site to click through the left menu since there are so many options.
Otherwise thanks for a great menu. Thanks! Alexa

[Previous commenter and your reply that I'm referring to http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/#comment-56358 (from mar 3rd and 5th)]

Nice Menu Thanks

Very simple tutorial, thank you. Time saver!

Great script. Is it possible to make it scroll horizontally rather than vertically?

Thanks!

Doug

Hi Bud,

thx for the great work.

How to make the first element automated active.

Thx

Ryan

I am using your great accordion as a menu and so I have added some server side scripting so that the ‘current’ accordion has a class of accordionCurrent rather than accordionContent. By doing this it means that when I click a child link of the accordionCurrent and the page reloads the accordion stays open – which is what I want. However, I have two issues I’m hoping you may be able to help with….. 1) If I click on the accodionbutton of the accordionContent I can’t get to close and 2) When I clikc another accordionButton the accordionContent will stay open UNTIL I click a child of the newly selected accordionButton.

Have tried lots of changes but my jQuery knowledge isn’t good enough yet – hoping you can help

Regards

SAFC

Hey all. First off, great script. I have a question regarding mobile. I am using the script for a mobile browsing experience. In almost all the cases that Ive tested this script in, the accordion function works great… except for one thing: while the accordion is animating, and there is text content in the panels, the text is shrunken. As soon as the panel finishes animating open, the text snaps up to full size. I am not sure how to keep the text at one size at all time. I have modified the CSS to attempt to force the text to stay locked into a size, but have had no luck so far. Any thoughts?

Hi,

Im very New to jquery,I have a big prob with accordion

The thing is I have 3 headers in accordion,under each header ten paragraphs are there.so ihad used inline scroll bar.its working fine,but the task is when i click on particular accordion header paragraph 6 should be opened,

Eg,
if i click on header2,as header 2 contains 10 paras under it,so 6 para should be displayed first..

so is there any way to sort the content under the particular accordion..or is ther any way to display our respective content first

I love your accordion solution! Thank you so much for sharing.
I am having a slight problem with it though: I can get it to work with jquery 1.4.2 but I am using it on a WordPress site and it will not work with 1.4.4. I replaced the core file for now with 1.4.2 but that will be overwritten when WordPress is upgraded. How can I get it to work with a newer version of jquery?

This is great. I have just plowed my way through the jQuery UI accordion and got it working more or less, but the code does seem excessive for what I want, and this is so elegantly simple. Two questions:

1) Can I use this with jQuery 1.5.2, which I need for another element on the same page I’m designing? I read the comments above and it sounds like the update breaks the functionality somehow.

2) If this can work, how can I tweak the js code so that:

a) all the content divs are closed when the page first opens
b) mousing over a button opens its content div
c) no two content divs are ever open at the same time
d) once the accordion has been expanded once by the user, it never again completely collapses, unless the html page is reloaded. In other words, after one content div has been made visible, one and only one content div will always be visible.

any clarifications much appreciated.

thanks team, it made life pretty simple

trying to see how it is possible to make one will be open while all the other menu’s collapsed

something like this http://jqueryui.com/demos/accordion/

Hi Ryan,
Thanks for this simple JQuery accordion.
I’d like to use it like Adam Fisk (March 9, 2009 @ 5:12pm) http://www.littleshoot.org/home
That is each menu item links to a new page and also opens an unordered list of links in the content area. All links are opened in an IFrame so the accordion is not reloaded with each link.
I’m new to all this and would really appreciate as much detail (html, css, jquery) as possible.
Thanks for any help
David

@davidm

davidm replying to davidm.

Instead of bothering everybody with your inane questions.
Just replace the divs with Jeremie’s (October 27, 2009 @ 11:35 am) list, add your link into the accordionButton li, don’t change the javascript and it’ll work perfectly.
Is that enough detail for you?

davidm

Hi Ryan,
This is such a useful and simple resource, and there are so many nuggets of info here posted by yourself and others.
I thought it would be nice if it was all organized into a web page with demos and coding for all the different uses mentioned here, ’cause there are so many comments here now that alot of these little nuggets get overlooked.

David

Hi! Congrats! I’ve looking for a long time something as simple and stupid like this .

However, I have a doubt/suggestion. If you click any link, accordion resets/closes when the new page is loaded. ¿How can I avoid it? I’d like keep showing the submenu which the user clicked on it.

Thanks in advance!

i’m completely dummie in .js, but it would be (well written of course) something like…

$(‘.accordionContent’).hide();
$(‘.accordionContent_open’).show();

Hi, im from argentina, sory my english

I need this menu (3 levels) diferent colors:

OPCION A
-subopcion A
–subopcion A1
–subopcion A2
-subopcion A

OPCION B
-subopcion B
–subopcion B1
–subopcion B2
-subopcion B

OPCION C
-subopcion C
–subopcion C1
–subopcion C2
-subopcion C

NOT WORK ! CAN HELP ME ?!?!

I do this:

HTML:

Empresa

Productos

ProductosA

A-1
A-2
A-3

ProductosB

ProductosC

ProductosD

Servicios

Contactenos

JAVA:

$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$(‘.accordionButton’).click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$(‘.accordionButton’).removeClass(‘on’);

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$(‘.accordionContent’).slideUp(‘normal’);

//IF THE NEXT SLIDE WASN’T OPEN THEN OPEN IT
if($(this).next().is(‘:hidden’) == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass(‘on’);

//OPEN THE SLIDE
$(this).next().slideDown(‘normal’);
}

});

/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton’).mouseover(function() {
$(this).addClass(‘over’);

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over’);
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ACCORDION BUTTON 2 ACTION (ON CLICK DO THE FOLLOWING)
$(‘.accordionButton2′).click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$(‘.accordionButton2′).removeClass(‘on2′);

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
//$(‘.accordionContent’).slideUp(‘normal’);

//IF THE NEXT SLIDE WASN’T OPEN THEN OPEN IT
if($(this).next().is(‘:hidden’) == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass(‘on2′);

//OPEN THE SLIDE
$(this).next().slideDown(‘normal’);
}

});

/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton2′).mouseover(function() {
$(this).addClass(‘over2′);

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over2′);
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ACCORDION BUTTON 3 ACTION (ON CLICK DO THE FOLLOWING)
$(‘.accordionButton3′).click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$(‘.accordionButton3′).removeClass(‘on3′);

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$(‘.accordionContent3′).slideUp(‘normal’);

//IF THE NEXT SLIDE WASN’T OPEN THEN OPEN IT
if($(this).next().is(‘:hidden’) == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass(‘on3′);

//OPEN THE SLIDE
$(this).next().slideDown(‘normal’);
}

});

/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$(‘.accordionButton3′).mouseover(function() {
$(this).addClass(‘over3′);

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass(‘over3′);
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

/*CLOSES ALL S ON PAGE LOAD*/
$(‘.accordionContent’).hide();

});

CSS:

#wrapper {
width: 150px;
float: left;
}

.accordionButton {
width: 150px;
float: left;
_float: none; /* Float works in all browsers but IE6 */
background: #003366;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
}

.accordionButton2 {
width: 150px;
float: left;
_float: none;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
background-color: #0099FF;
}

.accordionButton3 {
width: 150px;
float: left;
_float: none;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
background-color: #FFCC00;
}

.accordionContent {
width: 150px;
float: left;
_float: none; /* Float works in all browsers but IE6 */
background: #95B1CE;
}

.accordionContent2 {
width: 150px;
float: left;
_float: none; /* Float works in all browsers but IE6 */
background: #95B1CE;
}

.accordionContent3 {
width: 150px;
float: left;
_float: none; /* Float works in all browsers but IE6 */
background: #95B1CE;
}

/*EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS*/

.on {
background: #990000;
}

.over {
background: #CCCCCC;
}

.on2 {
background-color: #FF3300;
}

.over2 {
background: #CCCCCC;
}

.on3 {
background-color: #339900;
}

.over3 {
background: #CCCCCC;
}

HTML:

<!–
Empresa

Productos

ProductosA

A-1
A-2
A-3

ProductosB

ProductosC

ProductosD

Servicios

Contactenos

–>

Hi there! Thanks for the script, it really helped me.

I would just change one thing: when you click in a already open item the script shouldn’t do anything, it’s weird to see it close and open again.

Besides that it’s perfect, once again thank you!

hi its really nice and simple one

but i have one query on it . on page load all the div get hide , but my requirement is if i want to show 1st div and collapse all the div.

rest all are same. only i want on page load show first div

thanx

How would I change the jquery code if I wanted to add h1 tags in between the .accordianButton class? Please see what I’m trying to do below. My intentions of doing this is to increase SEO optimization. Am I going about this the right way?

ourPHILOSOPHY

hei i got the ans.
http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/#comment-11277

on this post reply u have mention it how to do this thx

Well, I figured out how to use Ryan’s awesome accordion script with a newer library of JQuery. I am using it on a WordPress site and every time I upgrade it, it overwrites the jquery.min.1.4.2.js. So here is the solution:

Load your newest jquery library first, then include the following – remember that the path is relative to your site so adjust the path accordingly:

var $jq = jQuery.noConflict();

Voila! It works and no more hacking WordPress to run the older version on that page!

Oh no! I see that it cut out what I had posted, so perhaps I need to enclose it in parentheses….

”

var $jq = jQuery.noConflict();

“

Very helpful article/script. Thank you for keeping up with more than two years worth of comments as well! The discussion is a very useful tool for understanding what the script is actually doing.

With your help, I may one day get the hang of this!

Simplicity oftenly demands geniality, thank you for the code, it was very helpful, God bless you.

Hi,
is there an alternative to ” trigger(‘click’); “?
i am using your nice code for the menu of my site which is made in typo3. typo3 adds a class “aktiv” to the menu element that is the active page.

so i used

$(“.aktiv”).trigger(‘click’);

to make the accordion Content stay open when the page is reloaded. otherwise the accordion opens but turns back to the original state (all elementas closed), i guess due to

$(‘div.accordionContent’).hide();

but the problem with $(“.aktiv”).trigger(‘click’);
is, that when the new page loads, the animation is made twice, strangely.

is there a way to just say the code like

“FOR CLASS ‘aktiv’ ALWAYS LEAVE THE ELEMENT ‘accordionContent’ OPEN??

i was trying all day but i culdn’t find the solution

my JS:

$(document).ready(function() {

/********************************************************************************************************************
SIMPLE ACCORDIAN STYLE MENU FUNCTION
********************************************************************************************************************/
$(‘div.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideToggle(‘normal’);
});

/********************************************************************************************************************
CLOSES ALL DIVS ON PAGE LOAD
********************************************************************************************************************/
$(‘div.accordionContent’).hide();

/********************************************************************************************************************
OPEN ACTIVE ELEMENT
********************************************************************************************************************/

$(“.aktiv”).trigger(‘click’);
});

and the HTML:

div id=”submenu”>

Content Elements
<div class="accordionContent"

Headers
Text
Bulletlists

About Us

test

I have a problem in Ie7 where if i have a relative positioned UL list and you click one of the accordion button, the UL list instantly snap appears instead of fades/scrolls like in IE8/Firefox/chrome/opera.

Try this in ie7.

Button1

1

Strange snap.

Argh, sorry i should have read the thread.

[code].accordionContent { width: 900px; float:left; display:inline; position:relative; }[/code]

That’s the answer, seems to fix it.

Internet my friend, i love you.

found the solution!!

/*****************************************************
OPEN ACTIVE ELEMENT
******************************************************/

$(“.accordionButton.aktiv”).next().show();

Hi I need to add another level – that is

accordionButton
accordionContent
accordionContentDescription

The scenario is:
accordionButton – main menu
accordionContent – sub menu
accordionContentDecription – sub menu item description
which expands when you hover over accordionContent.
Is this possible? If so how? Code snippets greatly appreciated.

Thanks for any help
David
“Paddling upstream searching for the source”

I have been trying to make sure the accordions persist across pages nicely on classic ASP. This should be applicable on most pages.

Often on page loads all of the content within my div accordionContent appears for a second while the css style loads.

I put this in page
.accordionContent ul {display:none}

That fixes the pre-css styled flick of unstyled ugliness.

Now, to keep the clicked accordion button/content open on the following page i use this asp code.

<%
response.write (" ” &_
” #D”&contentid& “” &_
” { ” &_
“display:inline” &_
” } “)
%>

I pass the contentid value in a querystring to the next page
contentid=request(“contentid”)

This seems to work nicely.

I was able to implement this script easily, thank you; however, it interferes with the java for the milkbox that I have on this page

Can anyone tell me how to resolve this issue?

Hi all,

I apologize if this has already been covered but I was looking for a way of automatically scrolling the page to the top of each button and found a nice little JS addition.

In the JS add:

$.scrollTo(this,{duration:1000});

directly underneath this:

//OPEN THE SLIDE
$(this).next().slideDown(‘normal’);

and the page should then ‘autoscroll’ to the header when selected.

@ Ryan,

Great code. Thankyou.

Does anyone know of a way of bypassing the above JS on the initial page load?

Ok,

I figured out how to prevent the lightbox & accordion scripts from conflicting with each other.

Apparently the MooTools library (I was trying to use Milkbox) conflicts with the jQuery library so what I did was simply switch to a jQuery lightbox. I used prettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

I like it so much better than Milkbox anyway

You can see the results here:
http://kaladarshan.arts.ohio-state.edu/resources/maps.html

Thanks so much for the code Ryan!!

hi all,

in this jquery accordian, all the accordianButton are blue, how would the jquery work with each of the acccordianButtons a different color

thanks

EXCELLENT script, saved me + + headaches, thank you very much!

FIO: One of my Staff here needed to stop the other sections from collapsing on click so I commented out the following from the JS;

//COMMENTED OUT THIS LINE $(‘.accordionContent’).slideUp(‘normal’);

and it worked perfectly, once a user expands a section, the previously expanded section stays open and this seems to work across all browsers. One happy user

PS You should have a ‘Donate’ button on this page

Thanks for the great jQuery, been looking for this forever.

The world needs more scripts like this (and devs like you willing to share them). No more frills, fluff, or fakes. Just mechanically sound implementation like this.

And for the icing on the cake… All the snippets from the comments used to extend your accordion are equally impressive. ‘Bout time I found something useful on the web!!!

Very nice indeed. Thanks for offering!

Hi, great work!
Using the code currently in a wordpress theme. however when I load up the page all the boxes are open and the click to close/open doesn’t work. I have the js loaded in. Can’t really figure out where I’m going wrong. Have followed your instructions above…
Thx
James

THANK YOU SOOOO MUCH!!! this is what I’ve been looking for the past few days and you hav made it very easy

I have scoured the comments, but I cannot for the life of me, figure out how to keep a section open if you go to another page. My mark up looks like this:

Header

Link 1
Link 2

Header2

Link 1
Link 2

If I open Header 2 and click one of its links, I need it to stay expanded until I either expand another section, or collapse the one I’m viewing manually. Please somebody help!

Thanks!

Thanks for this. I usually don’t comment, but this was soooo helpful. bookmarked.

Thanks so much for this… so slick!

Scenario for you: I’m using PHP to pull an RSS feed to populate this accordion, so the content and order of content is changing all the time depending on what is in the feed.

I want to be able to link to my page that contains this accordion using anchors on the URLs to open corresponding content areas. I know similar functionality has been covered, but it was based on the order of the content, which will be changing on my site.

I’m wondering if I can place the named anchor within the content div and then use it as an identifier to indicate which content div should open.

Example:

URL: mysite.com/#unique-anchor

the HTML:

Title

content here

Not sure if it would be do-able, but if there are any ideas, I would appreciate it!

thanks again!!!

Sorry.. the html didn’t show up… trying again

<!–
title

content
–>

Thanks, nice script! By d way, anyone know how to change the button from background color to load image? I try to change in the css but it doesn’t work.

/*css*/

.accordionButton {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
width: 787px;
float: left;
_float: none;
background: url(../images/title_off.gif) no-repeat;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding:5px;
padding: 0px 0px 0px 28px;
height: 29px;
line-height: 28px;
}

.accordionContent {
width: 787px;
float: left;
_float: none;
background: #95B1CE;
}

.on {
background: url(../images/title_on.gif) no-repeat;
height: 28px;
}

///////////////////////////////////////////////////////////
thanks for help.

Thanks for this great tutorial! It’s indeed stupidly simple and so nice and easy to customize!
Thank you!

PS: Great that it VALIDATES! Not all JS does…

Hi Ryan,

Thanks so much for this script. I’ve been through many accordions already and this is so far the quickest on all browsers and dead simple to install.

I’m trying to run a custom scrollbar (tinyscrollbar.js) within the accordion panels through an iframe. I’m getting good results in every browser except Firefox on PC and Mac. the scrollbar is only loading on the first box and not on any other. I’ve been troubleshooting this for days already and am hitting my breaking point (as well as a deadline).

I was hoping you may have some time to make a suggestion or quickly look through the code. Please take a look at the script running here: http://enkshows.com/coterie/new3/

Below is the JS I’m using from your script, please let me know if there is anything furhter I can share with you such as the scrollbar JS.


$(document).ready(function() {

Hi there, I know this is probably far to simple for this discussion but I am struggling with getting links to work in the accordion content section. Would be grateful for any help.
Thanks!

Hey!

Great simple script! So ‘stuipidly simple’ I messed it up when I started tweaking. I used your original, plus some mods from folks here on the posts & am thrilled with the simple solution on my site.

However…

I messed up a bit when I dropped the automatic reveal / hide function each time a user clicks on a new accordian. Everything on my site is fine, just want to make sure the previously opened accordian closes when a user clicks a new one (it’s a fixed page height issue before the footer).

Any help is appreciated.

problem pages are: http://getindaflo.com/services.html & http://getindaflo.com/about.html

both pages need the fix.

thanks!

Jason
indaflo Local Marketing Kauai

I love this accordion!

I am, however, looking to do a little more with it: I want each of the 3 accordionButtons to open up their 3 accordionContents containing 3 links each (9 links total). Each of the 9 links will open 9 separate images contained in another relative-position div located to the right of accordion menu. (all images are in absolute-positioned divs —display:none— on top of each other in this one div).

2 problems:

1) with the first accordionButton/accordionContent/3links it works fine, but the subsequent 6 links reveal the same images as the first Content links. and,

2) when the page first opens, the first image flickers 3 times before remaining visible.

I am using UL tabs js to open the other divs.

If anyone can help, I will send the code.

Many thanks in advance!

Brigitte

Good job..

I also love this accordion.

Quick question, is there an easy way for each button and background to have an individual colour?
Any help would be more than appreciated.

greetings

Scot

This is awesome code.

I have noticed in IE7 the accordion pushed my page content down when opening. The page content goes up and down with the accordion.

This does not happen in FF or IE9.

Is there a fix for this? I already have a separate css for under IE9 and IE9/FF.

Any help would be appreciated. TA

Great accordion Ryan,

I have read all the comments but no one has the condition that i have:

if i click a link (accodionButton) that is already open than it should not close if I click on the same link again.

here an example:
http://www.sohtanaka.com/web-design/examples/accordion/

thx in advance

Mamoru

Great accordion Ryan,

I’ve read all the comments but no one had my conditions:

if I click a link (accordionButton) it opens but if i click the same link again it should not close.

example:
http://www.sohtanaka.com/web-design/examples/accordion/

thx in advance

Mamoru

This is a great Accordion!, ill post later what im working on!

7 lines only.


$(document).ready(function() {
$(".features div").hide();
$(".features h3").click(function() {
$(".features div").slideUp(10);
$(this).next(".features div").toggle();
});
});


Ou voir un exemple ici: http://jsfiddle.net/dA6ww/4/

Great stuff, thanks for sharing it.

I’m working on a project where the content in the ‘accordionContent’ panels is quite large so I wanted to create a ‘close panel’ link at the end of each box. Not a hard task if you know a bit of JS, but I thought I’d share it in case someone is after the same thing and doesn’t know how to do it:

In the JS document, add the following code:

$(‘.closeProgram’).click(function() {
$(‘.accordionContent’).slideUp(‘slow’);
});

You can add this anywhere within the $(document).ready function (I added mine just before the ‘CLOSES ALL S ON PAGE LOAD’ section, almost at the end of the doc.

After that you can add something like this to your html (inside the .accordionContent DIV):

close panel

You can use any kind of link, as long as you include the ‘closeProgram’ class.

Hope this helps

I did a minor tweak to the code from my previous comment:

$(‘.closeProgram’).click(function() {
$(‘.accordionContent’).slideUp(‘slow’);
return false;
});

The new line (return false;) prevents the browser to jump to the link anchor (“#”). This means that the browser doesn’t try to go to “www.yoursite.com/#” when you click the ‘close panel’.

Hope this makes sense!

First of all, great jQuery accordion! Very simple!

I have one issue with a site I’m building. I’ve narrowed the issue down to the accordion.js file. If I delete that file, the other jQuery animation works fine.

Basically, I have the jQuery Flexslider, image slider ( http://flex.madebymufffin.com/ ) in one of the accordions. The accordion starts off collapsed. When clicked it reveals the Flexslider. Unfortunately, the height of the Flexslider is shortened, and not full height.

If I am to remove the accordion.js file, the accordion obviously stops working, but the height of the Flexslider becomes correct.

I wish I were a JavaScript programmer, but I’m not. I also looked into the CSS, but none of the tweaking I did there make the Flexslider work.

Here’s the testing site for reference: http://k2md.net/mobiletest/

Thanks in advance!

UPDATE:

For some reason, the images’ correct height started working on the phone. But, the height is still messed up in Firefox, Safari, and I’m assuming in other desktop browsers as well.

One other question, which is probably simple for JS programmers:

Is there a way to delay the accordion (in milliseconds) from opening when clicked?

Great tutorial I was struggled for long time.

Is there any way to have the cursor change to a hand when it hovers over accordionButton?

7 lines only.

$(document).ready(function() {
$(“.features div”).hide();
$(“.features h3″).click(function() {
$(“.features div”).slideUp(10);
$(this).next(“.features div”).toggle();
});
});

exemple here: http://jsfiddle.net/dA6ww/4/

@SR

Look in the code above. It’s there… “cursor: pointer;”