Stupid Simple jQuery Accordion Menu
Last week I had to create an accordion style menu for a project. Accordion menus are a very, very handy tool to show and hide information as needed. I have used them on sites like http://www.spokanesymphony.org and http://2008-2009.spokanesymphony.org. While the accordion system I used on these sites worked well, I decided to write my own using jQuery with the goal of making it as simple as possible.
I have found many of the existing accordion menu systems to be bloated and difficult to understand. I knew there had to be an easier way to create an accordion menu. Instead of using a list like most alternate systems, this system uses a grouping of DIV elements with specific names.
ORIGINAL VERSION: DEMO | DOWNLOAD
UPDATED VERSION: DEMO | DOWNLOAD *
* Note: The updated version was released on 3/25/10 and it is slightly different than the example detailed in this post, however, installation is virtually the same. The updated version addresses a number of frequent feature requests from fans of the script. These include use of jQuery 1.4.2, adding a mouseover effect, adding a selected effect, and the ability to close open menus by clicking their header.
Note: Here is an example of how to pin open the first item and an example of how to select any item to pin open on load.
How to implement this jQuery accordion style menu:
Step 1 – Include jQuery:
For a jQuery beginner the first thing you need to do is to include the jQuery library. Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
Step 2: – Create the JavaScript
Next you need to create a blank JavaScript file. For the example, this file is called javascript.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just as we did the jQuery library in Step 1. An example of the JavaScript code to include in this document is shown below:
$(document).ready(function() { //ACCORDION BUTTON ACTION $('div.accordionButton').click(function() { $('div.accordionContent').slideUp('normal'); $(this).next().slideDown('normal'); }); //HIDE THE DIVS ON PAGE LOAD $("div.accordionContent").hide(); });
Step 3 – Create the CSS:
Now we need to create a CSS document with our two selectors accordionButton and accordionContent and then include that in the head of the document. Examples of these selectors are included below. The color, contents, and visual formatting can all be manipulated. It is important these elements retain their float: left or display: inline-block property so that they will display inline.
#wrapper { width: 800px; margin-left: auto; margin-right: auto; } .accordionButton { width: 800px; float: left; background: #003366; border-bottom: 1px solid #FFFFFF; cursor: pointer; } .accordionContent { width: 800px; float: left; background: #95B1CE; display: none; }
Step 4 – Create the HTML:
Now we need to create the HTML we’re going to manipulate. For this example we will keep the page very, very simple. In a more complicated HTML document you need to make sure the two classes used for the accordion DIV items are not used elsewhere. jQuery will be looking for the class of the element so if it is present elsewhere in the HTML document it will cause some unexpected problems. The full HTML document also displaying the includes is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery Accordion Style DIV Menu</title> <link href="style/format.css" rel="stylesheet" type="text/css" /> <link href="style/text.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="includes/javascript.js"> </script> </head> <body> <div id="wrapper"> <div class="accordionButton">Button 1 Content</div> <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> <div class="accordionButton">Button 2 Content</div> <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> <div class="accordionButton">Button 3 Content</div> <div class="accordionContent">Content 1<br />Short Example</div> <div class="accordionButton">Button 4 Content</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> </body> </html>
Notice that we have alternating rows with the styles accrodionButton and accordionContent. Clicking accordionButton will trigger the drop of the next instance of accordionContent. It is very important these elements alternate properly with nothing inbetween for the system to function properly. Each element can contain HTML, nested divs, or other styling elements.
Step 5 – Check out the Result!:
Now we have all of our code we need. View the system in the browser and it should work great. Clicking on each button will cause the content below it to drop. The content will retract if another button is clicked. (Note: If you needed to keep the content elements open after a click on a seperate button instead of having them retract you can do this easily by removing this line from the javascript.js include:
$('div.accordionContent').slideUp('normal');
View a complete example or download a complete example:
Click here to view the demo of the accordion style jQuery menu
Click here to download the demo files for the jQuery accordion style menu
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
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
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:
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
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.
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.
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.
@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.
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
Section 2 Title
Content 2
Section 3 title
Content 3
And alter your javascript to:
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('h2').click(function() {
$('p').slideUp('normal');
$(this).next().slideDown('normal');
});
//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:
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:
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();
});
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
Button 2
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
Button 2
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
Button 2
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
Button 2
Button 3
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 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?
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”);
});
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!
…just answered my first question: to change the speed of the slide, change “slideUp(‘normal’)” to “slideUp(‘fast’)” in all instances, same with “slideDown…”.
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.
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
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!
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…
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();
});
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:
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.
@Lindsay I checked it out and it looks great. Nice use of the menu system. Should be a good example to others trying to make it work .
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?
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.
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.
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!
@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
I still don’t really get it….any extra help you could give would really be appreciated.
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
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
Sort of, except I need to have a different background image for each button.
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!
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!
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
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….
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!
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.
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?
I always like stupid simple scripts to use. Thanks.
Page bookmarked for future reference