A UI component common in many applications (and starting to become common on the web as well) is the accordion menu. A number of javascript libraries provide nice and simple accordion menus, but today we are going to take a look at how to build our own - because, well, that is what we do here at Switch On The Code!
Below, you can see the example that we are going to build today. It is a pretty simple animated accordion, where each menu is collapsible/expandable. You can have them all collapsed, or a single menu open. It should be pretty self-explanatory, so play around!
Ok, now that your done having fun with that example, lets take a look at how we actually do this. First, we have the html:
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
I Am Accordion 3.
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 5
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
I Am Accordion 5.
</div>
</div>
Essentially, we have an accordion container div, which holds each of the the accordion menus. Each menu is made up of a title div, and a content div. The title divs have an onclick attachment, which calls the javascript function runAccordion. As you can see, it takes one argument, which represents which menu was actually clicked on (in this case, the menus 1-5). Of course, this doesn't make a whole lot of sense unless we define the CSS classes referred to in this html:
{
position:relative;
width:200px;
}
.AccordionTitle
{
height:20px;
overflow:hidden;
cursor:pointer;
font-family:Arial;
font-size:8pt;
font-weight:bold;
vertical-align:middle;
text-align:center;
background-repeat:repeat-x;
display:table-cell;
background-image:url('title_repeater.jpg');
-moz-user-select:none;
}
.AccordionContent
{
height:0px;
overflow:auto;
display:none;
}
.AccordionContainer
{
border-top: solid 1px #C1C1C1;
border-bottom: solid 1px #C1C1C1;
border-left: solid 2px #C1C1C1;
border-right: solid 2px #C1C1C1;
}
So the first chunk of css here applies to everything in the accordion. And it is here that you would change the width - modifying that value changes the entire accordion. Next, we have the style for the title blocks. A lot of stuff here, most of which is just making it look pretty. We use display:table-cell so that the vertical-align:middle style works (which is what aligns the title text in the center vertically). The -moz-user-select:none is to keep the text of the title from getting selected (in Firefox), which is useful because people will be clicking on the title bar. If you don't have that option, the title text will often get accidentally selected. The counterpart to this style for IE is the onselectstart="return false;" that we had up above in the html for each of the title divs.
The AccordionContent style is next, and is pretty simple. We hide it and give it a height of 0 pixels, because by default all AccordionContent divs are not displayed. We also set overflow equal to auto, which allows scroll bars to appear when the content is to big for the content div (useful for when the accordion menu is expanded, but the content still does not fit).
Finally, we have the AccordionContainer style, and all that does is set some borders, again mostly to make the menu look pretty.
Now, we can move onto the javascript, which is actually not that complicated. First, we have that runAccordion function referred to above, and some global variables:
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
So first we have a couple global variables. ContentHeight controls how tall a menu gets when opened - currently it is set to 200 pixels. TimeToSlide is the amount of time for the opening/closing animation, and it is currently set to 250 milliseconds. The opentAccordion variable holds the element id of the current open accordion menu. When there are none open, it is the empty string.
Now for the function runAccordion. The first thing we do here is transform the menu index passed in into the full element id, and hold it in the variable nID. If this is the currently open menu, then we are going to close it, and so nID gets set to the empty string (i.e., there is no new menu to open). The next thing we do is a setTimeout on a call to animate - a function which we will take a look at in a moment. And finally, we set the global openAccordion to the new open accordion, nID.
And here we have the animate function:
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
So the animate function takes 4 arguments - the last time the animation was updated, the amount of time left before the animation should complete, the element id of the closing menu, and the element id of the opening menu. The reason we care about time here is that the code always makes sure the animation completes in the amount of time specified in TimeToSlide. If we didn't do that, on slow computers the slide would have the potential to take much longer than TimeToSlide.
Because of all that, the first thing we do in the animation function is figure out how much time has passed since the last animation iteration. If that amount of time is greater than (or equal to) the amount of time left in the animation (as specified in timeLeft), we finish the animation. We do this by setting the opening menu (if there is an opening menu) to its full size, setting the size of the closing menu (if there is one) to 0 and making it invisible, and then returning out, thereby ending the animation.
If there is still time left in the animation, we calculate the ratio of time left to the total time in the animation, and multiply it by the the full menu height. This returns the new value for the height of the closing menu. Now, if there is a menu we are opening, we first make sure it is visible (because closed menus are initially invisible), and if it isn't we make it visible. Next we set the new height, which is full menu height minus the new height of the closing menu (this way as one menu closes, the other opens exactly in sync). Then, if there is a menu we are closing, we set its new height.
Finally, we do a new setTimeout call to animate, with the new values for the last time the animation was updated and the amount of time left in the animation.
And that is all that is needed to create an animated accordion menu using css and javascript! Here is a link to the javascript source file, and if you have any question or comments, feel free to leave them below.
11/02/2007 - 09:22
Is there anyway to get one of the accordians to Start opened up? I would like to make this be a type of a front page news story viewer.
12/04/2007 - 10:39
Nick, to have accordion 1 open by default, add this class to your css:
{
height:200px;
overflow:auto;
}
and then alter the Accordion 1 html to represent this new class
12/04/2007 - 10:41
oops, just change the class in the div that surrounds the text "I am Accordion 1." from AccordionContent to AccordionOpen
04/16/2009 - 19:05
A better way to do it is to add:
onload="runAccordion(1)"
to the body tag.
This is better because if you do it using the previous method of changing the class, the first accordion doesn't close when you hit the next one. You have to hit it twice to hide the first. The onload method is in line better with the coding.
01/22/2012 - 21:25
This works really well. I only have one problem with it in that when you go to a following page with the same accordion open, the drop down animation takes place again. Would love to know how to keep it open without the drop occuring.
12/27/2010 - 18:30
thanks you save my entire day
11/19/2007 - 04:19
Here is good tutorial about CSS: http://gohil.dharmesh.googlepages.com/css.html
Here is good tutorial about AJAX: http://gohil.dharmesh.googlepages.com/ajax.html
12/06/2007 - 05:55
Hi, how to do it without a height specified? Thanks. :)
12/06/2007 - 20:44
Hi there,
Nice control.
I noticed that when opened the height of the opened area is fixed. How does one make the area dynamically high depending on the content.
Also I made my own image & the text within the image gets chopped off - any ideas on how to control this ?
Thanks Dave
12/11/2007 - 15:21
"I noticed that when opened the height of the opened area is fixed. How does one make the area dynamically high depending on the content."
I needed the same functionality but couldn't find a way to allow AccordionContent to expand that div, but I did find a way to override the ContentHeight variable in the js file by turning it off, and then create a height in a style sheet for each Accordion#Content div. It works, though I'm sure the developer can provide a more elegant solution. I'm showing changed parts only. Essentially, the changes are just commenting out the parts of the script that use the ContentHeight var.
---------
Change 1:
var ContentHeight = '';
-----------------------
Change 2:
if(timeLeft
12/11/2007 - 15:22
Woops. Not sure if I can post the length of code I did or whether it is in moderation. I'll check back and repost or post a link.
TS
01/10/2008 - 10:04
Here is how I adjusted the sizing for the accordions...
in the javascript, make the first function look like this:
{
ContentHeight = AccHeight;
//...the rest stays the same
Then, simply when calling the runAccordion in your HTML, call it like this: runAccordion(1,250)...this will set the size of that accordion to 250.
Quick simple fix.
12/07/2007 - 08:02
I hadn't checked on the comments on this tutorial in a while, and I see there are a lot of "feature requests" :P
I'll try and put together a more advanced accordion control that accommodates everyone's requests - so look for an article in the near future!
12/09/2007 - 17:10
Awesome script!!
I'm looking forward to reading your next tutorial for the dynamic height control.
Also, I don't like how it shows the scroll bar when it opens up, can that be removed?
Thanks
Happy coding...
12/11/2007 - 00:36
Thanks so very much for the terrific script. Not only do you provide it, but you explain what you did, how, and why. Very well done. If you want to see what I did with it (a little BSP here), visit www.mysteriesontv.com. I found that initially visitors to the site didn't understand how the menu worked despite a brief statement telling them what to do. After I modified the procedure a bit and displayed the first three entries of each category, people seemed to understand better. It's definitely an improvement over the list of over 100 titles I previously had listed there! Anyway, thanks again!
12/13/2007 - 06:44
Very nice script, well explained, thanks for sharing such expirience.
I noticed, or believe so (correct me if I am wrong) that maybe ,just incase the computer is sooo slow that if it enters in the animate rountine for the first time past 250 ms already.
the display condition should be checked otherwise maybe the new open element might remain hidden.
Any ideas on how to make an evolution of this to a circular accordion? or an approximation for example a pentagonal design?
Cheers, Pau
12/20/2007 - 00:09
I am using accordion but it is working fine in IE7 but does not displays the div contents for the first title in Mozila unless I select other than first title option.After that if again first option is selected, it diplays the div contents.
I face this problem only in Firefox.
12/26/2007 - 13:00
Hi, thanks for the great tutorial! It works great. I would like for the first accordion to be open as a default. I tried Julio's suggestion above and even though it does work, the accordion then stays open even when you click on the others. Is there a fix for that?
Again, thank you!
LM
01/14/2008 - 19:01
Answer to the Accordion One being open! Ok, I was tried the css thing someone mentioned, of course that didnt work. So sometimes thinks are simpler than one could imagine. beating head on desk for 35mins thinking about this one.. then AhA! ... ok. when you click the accordion1 it runs, so instead in your body tag put onload="runAccordion(1)" ... works like a charm!!
01/14/2008 - 19:04
also... Fix to the scroll bar arrows showing up for a blink. Change your height to fit all your content then also change the add to your accordionContent tag, accordionTitle, overflow: hidden;
01/15/2008 - 06:24
Sorry about the bad english, my brain was frizzled. Now it is AM and i have coffee! woohoo!
1. To have the first Accordion open by default, put the javascript from your first accordion inside the "body" tag. (still keep the other one inside your first accordion tho, or it wont work when you try to close) so it will look like this:
body onload="runAccordion(1)"
2. To get rid of those flashing scroll bars use the tag "overflow: hidden" inside your css for your AccordionTitle and AccordionContent. You will have to resize your box to make sure it all shows when complete. But that isnt too hard.
Thanks to the creator of this Post, saved me alot of time trying to reverse engineer! Awesome and clean explanation, thanks again man!
01/23/2008 - 20:23
THANK YOU! Thank you so much for the updates ejgeske! Now it works exactly the way I wanted it to. Thanks again!
01/10/2008 - 09:12
Great tutorial!
Quick question.
Is there a way to add a link on the top level (i.e Accordion 1) so that it goes to a sub page while opening the I am Accordion 1 submenu on the sub page?
01/10/2008 - 10:14
Thank you very much. This is very nice and simple to understand
01/15/2008 - 02:10
I am new to javascript..
Just a contribution to make this accordion to make multiple-open concurrently by replacing the runAccordion() method..:)
var TimeToSlide = 250.0;
var openAccordions = new Array() ;
function runAccordion(index)
{
var x;
var nID = "Accordion" + index + "Content";
var openAccordion=nID;
var closeAccordion="";
for(x in openAccordions)
{
if(openAccordions[x]==nID)
{//already open
openAccordion='';
closeAccordion=nID;
openAccordions.splice(x, 1);
break;
}
}
setTimeout("animate("
+ new Date().getTime() + "," + TimeToSlide + ",'"
+ closeAccordion + "','" + openAccordion + "')", 33);
if(openAccordion!="")
openAccordions[openAccordions.length]=openAccordion;
}
01/15/2008 - 02:35
I use runAccordion(index, height) by DanH to set the custom height.
function runAccordion(index, AccHeight)
{
ContentHeight = AccHeight;
…the rest stays the same
Actually we can use offsetHeight to set the Actual Height of the div. For example on the html page..
Accordion 1
I Am Accordion 1.
It works! Actual height is set to the div. But the error here is that Opening has no slide-effect. The div appears immediately... though Closing works perfectly.
01/15/2008 - 02:40
Sorry ..I include html codes in previous post and they disappear. What I wanted to say is.. in onclick=”" method of each div..
runAccordion(1, document.getElementById(’Accordion1Content’).offsetHeight);
runAccordion(2, document.getElementById(’Accordion2Content’).offsetHeight);
..etc.
01/17/2008 - 11:07
changed from overflow: auto, to hidden. This removed the flashing in IE.
{
height:0px;
overflow: hidden;
display:none;
}
02/25/2008 - 13:13
Hi! This is a great tutorial.
I have a question:
Is there a way to add a two or three levels of submenus inside?
If is, how to?
Thanks
08/25/2009 - 15:59
did u ever use this script with sublevels?
hope u can email me
bartbruins@hotmail.com
01/16/2012 - 19:37
This code is HUGE;I'm just a newbie but even me can see its well done and explained!THANK U!!!
I found a way to make accordion independant on each others (I think I would work for accordion inside another but I didn't test it yet).
I replace openAccordion and nID by arrays. The cell of the array is function of the section I put in the ID of the content.Here's the first section of javascript (I didn't change the rest)
var TimeToSlide = 250.0;
var openAccordion = new Array();
var nID = new Array();
function runAccordion(index)
{
var indexx=parseInt(index),units = indexx % 10,section=indexx - units;
nID[section] = "Accordion" + index + "Content";
if(openAccordion[section] == nID[section])
nID[section] = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion[section] + "','" + nID[section] + "')", 33);
openAccordion[section] = nID[section];
}
And the HTML code for example
<div onclick="runAccordion(11);">
<div class="AccordionTitle" onselectstart="return false, ContentHeight=125;;">
Accordion 1
</div>
</div>
<div id="Accordion11Content" class="AccordionContent">
I Am Accordion 1.
</div>
<div onclick="runAccordion(12);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion12Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="runAccordion(21);">
<div class="AccordionTitle" onselectstart="return false, ContentHeight=125;;">
Accordion 1
</div>
</div>
<div id="Accordion21Content" class="AccordionContent">
I Am Accordion 1.
</div>
<div onclick="runAccordion(22);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion22Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="runAccordion(23);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion23Content" class="AccordionContent">
I Am Accordion 3.
</div>
</div>
</div>
Example: you put 925 in the fonction AND the id of the div content and it means Accordion n°92, fifth content.
I d be glad to be useful!
professeurwalas of gmail
03/14/2008 - 05:31
I made my own image & the text within the image gets chopped off, how you controll it?
03/14/2008 - 14:00
Is there a place where the actual html portion is posted? I have set up the menu, but it operates very jerky. I must have something wrong, but I can not find it.
03/26/2008 - 01:58
Hi,
I am new to web design and coding, so need a little help in how to put this all together.
Do I create separate css and js files or just lump it all together?
Would appreciate any help.
Thanks
Paul
04/05/2008 - 14:09
hi there,
really top notch example. keep up the great work.
just wondering if there was a way of altering the code so clicking on one header does not automatically close the header that is currently open?
04/14/2008 - 14:12
Same question as solastyear. Can you get the menu to stay open until you click it to close? I'm brand new to javascript. I did add Swe Han's code into the original source file and it worked. However when i added more buttons/divs it broke and now I can't get it to work even with just 5 buttons can anyone help?
04/30/2008 - 22:35
How do you make sub-accordians within accordians. Or to put it better a submenu within a submen?
05/29/2008 - 08:54
also… Fix to the scroll bar arrows showing up for a blink.
02/24/2009 - 15:14
I agree. I see the scrollbars flash for a second in Chrome and Safari, but not Firefox.
05/29/2008 - 11:53
Hello. Great script! I was wondering how I can get each content area to dymanically grow when it is opened instead of having to use a set height that is set with "ContentHeight". If anyone can help me out that would be much appreciated. Thanks!
06/02/2008 - 10:01
Figured it out:
if(opening != null)
opening.style.height = 'auto';
06/04/2009 - 16:26
Thanks Justin!!!
06/03/2008 - 00:25
thanks you.. byeeee
06/04/2008 - 03:33
Hi,
Good script,thanx it helped me a lot,but I have a question can I
implement drag stuff into this
Accordion,i.e I should be able to drag a row from somewhere outside
Accordion and put into it....
is it clear,pls help me out in this
Thanks
Poojitha
06/09/2008 - 09:14
For those of you interested I've modified the script to overcome the issue of static-height divs. The heights now expand depending on my content.
I added a function to the page onload event that goes through the divs and captures into an array their true heights, before they are collapsed. Then, when I expand a div I modified the routine to get the ContentHeight from the array based on the index variable. If I can work out how to post up the code I'll do it...
10/23/2008 - 21:12
daves... can you post your fix for the height issue?
It would be appreciated.
I've tried the other fix mentioned on this page by Justin, but it makes the open close transition very jerky.
Anyone else have a solution that works smoothly?
06/12/2008 - 15:22
How can I have multiple content areas open at once. I tried the code above but it didn't seem to work. Thanks.
06/19/2008 - 19:16
I'm interested in knowing how to make the height of the divs dynamic rather than static. Awesome script!
06/24/2008 - 07:22
Has anyone tried to use it with a master page? I can't make it work...
I have successfully made the accordion work on a standalone page, but when I throw the accordion on a master page and show a blank default page it falls apart; the accordion does render on the page but it doesn't expand or collapse
06/24/2008 - 08:03
please help...
06/25/2008 - 12:50
Hi,
The effects seems to be great...
You will soon find it on my website, but I will try to convert it to horizontal sliding.. just thinking... :)
thanks for the share!!
happyhardik.
08/17/2011 - 01:45
Great Job!!!!! Is there any means or way to change to horizontal accordion. I'm also waiting that. please help us
06/25/2008 - 14:57
I also am looking to have a horizontal accordian, but I am too new at this to figure it out. Is there a spot in the CSS that would easily change to horizontal or will that take all new functions?
07/07/2008 - 09:55
I'm trying to have the menu not display the section header of which ever section is active... hows I do this?
07/25/2008 - 06:11
Thanks for the script works great is there a way I can make this so the menu is persisitant?
07/28/2008 - 13:32
Great! I found it useful! However, is there a way to have background pictures in the accordions?
07/28/2008 - 13:33
:) found it
05/06/2010 - 19:44
How did you do this?
Thanks.
07/31/2008 - 10:28
Does any one know how to add a accordion within an accordion???
Cheers
08/06/2008 - 13:21
Thank you !
08/15/2008 - 03:27
hello i cant understand how to build accoidian code in my html page. please guide me
09/22/2008 - 23:21
when i used the code given above in a while loop. all accordions got opened its not collapsed on one another how to fix the problem ???
this was the code i used...
10/16/2008 - 03:20
Great Code!!!
I have modified it a bit to include sub menu's inside each accordion. But was stuck with dynamic height of the accordion. Thanks to Justin.
The hack works absolutely brilliantly!!!
04/21/2009 - 14:34
Is it possible for you to either post or point to sample code to include submenus? It would be greatly appreciated.
03/18/2010 - 19:02
This is exacly what I am looking for please can you publish code?
10/16/2008 - 17:07
I got this working fine as long as the js is in the head tag of the page. When I put the sc ript into an external file it doesn't work.
Do I need an onload event or something in the body tag? I tried
onload=”runAccordion()” in the body tag but that didn't work.
I'd like to get the script off the page as there are several pages that will have the menu.
10/24/2008 - 01:10
Thanks for this script,its good nd easy to understand
10/30/2008 - 20:04
would be nice for those of us who are not familiar with javascript if you could direct us where to place the code :\
11/02/2008 - 10:22
that was the best i have ever found.....but when i have embeded it my site i found a flaw....i donnt know why it is happening but when ever i hit the last menu button in IE6 (have not checked in IE7 yet), the whole div hide out and i donnt see anything
11/06/2008 - 12:43
Thanks a lot for this great explanation. I needed to edit an accordion menu for our corporate site. I was lost until I found your page.
12/10/2008 - 01:06
Thanks
12/10/2008 - 01:06
The Accordian menu is working great. Thanks for the wonderful code!
How to toggle images placed on div tags? I have a + symbol on div tag when closed it should change to - when opened and when clicked on another div tag it should become +
12/14/2008 - 05:02
Thanks for this script.
12/23/2008 - 09:47
Too good, very useful :)
01/10/2009 - 09:36
Can I get the script with the auto size and the image placed on div tags (+ / -)?
This is cleanest impentation of an accordian out there. Thanks.
02/17/2009 - 14:20
I am thrilled with this but does anyone know how to make the expanded tab look active and different from the others?
02/22/2009 - 10:35
thanks for your code
I used it to develop my site but i have a problem :
- how to transform your code to make it like apple Accodrion ?
I made 3 levels in your code :
- Menu
- Sub menu
- Links
and then I tried to keep (when I clic on links or sub menu) actif with another color (instead if i reload the page) like this script :
http://berndmatzner.de/jquery/hoveraccordion/index.php
but I failed !!!
Any help please ???
02/24/2009 - 15:02
Sub-levels ?
Great menu. I'm trying to get sub-levels (sub accordions)to work, but my coding skills are too weak. (not worth posting my lame attempt)
If anyone has gotten sub-levels (accordions within the accordion) to work I would greatly appreciate it if you could post some code. You will be my hero, seriously.
It looks like people posted some code before but was taken out because not posted between language tags (see right side)
Thanks.
03/04/2009 - 09:23
Hi.
I would like to integrate the following functionality: a '-' or'+' will be displayed when the relative box is open/closed (i.e. replacing the 'Accordion N').
Here is an example from:
http://www.switchonthecode.com/tutorials/javascript-sliding-panels-using-generic-animation
function slideExample1(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'vvv';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '^^^';
}
}
Also, if you're feeling really generous how can I add a fade-in 'onClick' to the content area? Like is found here:
http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
Thanks in advance.
04/07/2009 - 11:44
Hi, this script works beautifully, I just cut and pasted it into my page, how ever when I tried to create another version of it on the same page and clicked on the Title, it open the content of the First accordian. Is it possible to have 2 independently working Accordians on the same page?
Thanks
Tracey (newbie)
04/13/2009 - 22:19
Hi,
great tutorial, got me trough a rough patch trying to use mootols accordion,
i have the same plea as Kempison...how to integrate animation with the fade effect?
is it possible to use Your simple fade effect? Or is it better to alter the animation function of accordion to accomplish this?
Thank You
04/21/2009 - 14:32
FWIW, I have found that by adding:
, ContentHeight=125;"
to the AccordionTitle line on the HTML side of things that I can individually control the sizes of the accordion that opens up.
Now I'm really hoping to find an example of how to spawn accordions within accordions ... can anyone post or point to some sample code to do so?
11/23/2010 - 06:24
hey thanks man. short, simple and effective.
05/20/2011 - 00:45
I was beginning to believe none of the comments here could help me out, but this was perfect
thanks
04/25/2009 - 21:34
Hi, I am using this script in my website and was wondering if theres a way to make it so one is always open to make it impossible to close all of them at once. Just wondering if its possible to implement into this script/
Thanks
Adam
05/02/2009 - 04:16
i'cant understand it please explaine it in a simple way.
05/07/2009 - 14:57
http://www.stickmanlabs.com/accordion/
Much more code, but more options and works
05/16/2009 - 09:19
Hi, thanks for the code.. It has been very helpful. I have a question. I have changed the color of each header. They have all seperate image color behinde them which is done by using css. However,I would like to know if there is a way to give these headers onmouseover effect? I want to change these headers color when the mouse is over like a button.
Thank you very much for your help in advance..
05/21/2009 - 11:23
Hi, I have fixed ContentHeight problem. Now you able to have flexible ContentHeight :)
(notify - page should has doctype!)
<html>
<body>
</body>
<script type="text/javascript">
var TimeToSlide = 200;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
ContentHeight = document.getElementById("Accordion" + index + "Content"+"_").offsetHeight;
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = 'auto';
if(closing != null)
{
//closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
<style type='text/css'>
{
position: relative;
width: 300px; /*changeble*/
}
.AccordionTitle
{
height: 20px; /*changeble*/
overflow: hidden;
cursor: pointer;
font-family: Verdana; /*changeble*/
font-size: 12px; /*changeble*/
font-weight: normal; /*changeble*/
vertical-align: middle; /*changeble*/
text-align: center; /*changeble*/
display: table-cell;
-moz-user-select: none;
border-top: none; /*changeble*/
border-bottom: none; /*changeble*/
border-left: none; /*changeble*/
border-right: none; /*changeble*/
background-color: Green;
color: White;
}
.AccordionContent
{
height: 0px;
overflow: hidden; /*display: none; */
}
.AccordionContent_
{
height: auto;
}
.AccordionContainer
{
border-top: solid 1px #C1C1C1; /*changeble*/
border-bottom: solid 1px #C1C1C1; /*changeble*/
border-left: solid 1px #C1C1C1; /*changeble*/
border-right: solid 1px #C1C1C1; /*changeble*/
}
.ContentTable
{
width: 100%;
text-align: center;
color: White;
}
.ContentCell
{
background-color: #666666;
}
.ContentTable a:link, a:visited
{
color: White;
text-decoration: none;
}
.ContentTable a:hover
{
color: Yellow;
text-decoration: none;
}
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<div id="Accordion1Content_" class="AccordionContent_">
<table class="ContentTable" cellspacing="2" cellpadding="2">
<tr>
<td class="ContentCell">
<a href='#'>Accordion 1</a>
</td>
</tr>
<tr>
<td class="ContentCell">
<a href='#'>Accordion 2</a>
</td>
</tr>
<tr>
<td class="ContentCell">
<a href='#'>Accordion 3</a>
</td>
</tr>
</table>
</div>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<div id="Accordion2Content_" class="AccordionContent_">
<a href='#'>Accordion 4</a>
</div>
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<div id="Accordion3Content_" class="AccordionContent_">
<a href='#'>Accordion 5</a>
</div>
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
<div id="Accordion4Content_" class="AccordionContent_">
<a href='#'>Accordion 6</a>
</div>
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 5
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
<div id="Accordion5Content_" class="AccordionContent_">
<a href='#'>Accordion 7</a>
</div>
</div>
<div class="AccordionTitle" onselectstart="return false;">
<a href='http://google.com'>Accordion 6</a>
</div>
</div>
</html>
09/11/2009 - 10:45
Thanks so much for this! It works beautifully!
03/19/2010 - 17:43
I am using this code, it is a work of art. I am going to make it blend in with my background. The whole Idea of an accordion as a menu is genius in itself. I originally had a vertical drop down, but that took too much space. This is much more efficient. Although I was wondering if it would be possible to make more than one accordion on the same page. I think that would be way too much work in itself though. I clap my hands on this one, and the original designer.
05/14/2011 - 06:56
Awesome job with this modification! Exactly what I was looking for! Thanks to you and everyone else for their input and tip!. Just learning js.
07/05/2011 - 02:12
You are a life saver! thx~
06/11/2009 - 11:34
Great code, this made my layout way cleaner.
07/28/2009 - 16:57
Cheers EvgenyUkraine,
This is awesome. Thanks so much for the contribution, you definitely get a gold star in my book. Excellent work!
08/19/2009 - 10:29
Hi guys, i would like to know how to make the accordion menu
in the opposite direction, i mean, when a click to the option menu it has to go up not go down like every accordion menu i've seen...
thanks for your help
08/21/2009 - 10:07
Hi,
Nice one,
A small doubt, when I am opening the second menu, it will close the first menu and while closing the first menu a small vertical bar is being visible, how to Hide it.
10/14/2009 - 12:45
if you mean the scrollbar do this:
In .AccordianContent
change to this:
{
height:0px;
overflow:hidden;
display:none;
}
Justin
www.jcpsnowproductions.com - Web Design and Development
10/21/2009 - 08:18
Has anyone gotten the "accordion within an accordion" to work. I have visited the site:
http://www.stickmanlabs.com/accordion/
but it looks like a whole new approach. I was hoping some just expanded on what is here.
Thanks
11/01/2009 - 20:10
Thanx a lot its works beautifully, MERCI ;o)
11/14/2009 - 15:08
Desperately trying to add 2 small images: 'arrowUp' and 'arrowDown' to the right of each accordion header text. These arrows should change dynamically depending on whether the accordion is open or closed.
Has anyone tried this?
I believe this will require modifications to the js, the css, and the html code. Am I right?
Can anyone point me in the right direction?
Thanks!
11/15/2009 - 02:51
I used this code after customization. It works fine. Thank you for posting.
Javascript:
var ContentHeight = 1;
var TimeToSlide = 50.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = 'auto';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
//var x=document.getElementById(Accordion1Content).style.height;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
//alert('banchod '+x);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) +'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
.AccordionTitle
{
width:251px;
overflow:hidden;
cursor:pointer;
font-weight:bold;
background-repeat:repeat-x;
position:relative;
}
.AccordionContent
{
height:0px;
overflow:hidden;
display:none;
position:relative;
width:251px;
margin:0px; padding:0px;
background:#9EB96A;
height:auto;
}
CSS:
.AccordionContainer
{
position:relative;
}
11/30/2009 - 14:09
This code is awesome, I can't figure out the container width, I still get this huge padding problem, is there anyway to fix it.
01/16/2010 - 16:15
Awesome Tutorial! Thanks for taking the time to put it together! Quick Question! is it possible to keep certian panes open as a page changes.. I am using it as a menu so for example if they click about.. the pane slides down with all of the ABOUT menu items.. Is it possible to have it stay open based on what links are selected in about etc?
Hope this makes sense!
02/22/2010 - 09:40
This is really great. I'm having a small problem, though. When I begin clicking on accordion's to open them, the first few will open successfully, but I always reach a point where the accordion will only open a little ways and none of the content will be displayed. Any suggestions?
02/22/2010 - 19:28
I started experiencing something very similar to this while I was still designing my web page. Clearing cookies and cache fixed it for me. Hopefully that'll help you out!
10/08/2010 - 13:55
I find that everything works if I have a table for the content, even if I only have a single entry. If I have a single element (or more) and do not embed it in a table then the accordion only opens enough for a single line and no content is displayed.
02/27/2010 - 09:52
Is there a way to make the first acoordion tab open when loading a page without editing the body tag, couse I'musing it on my blog and I can't edit the body tag. Is there a script add on to make this work. thank you
03/16/2010 - 23:36
This was very useful to. I used this as was my alternative to using the ASP.NET Ajax Accordion control.
Thank you
03/22/2010 - 02:11
Its really nice work i had edited your code and customized your design as per my requirement.i have to add some HTML controls in each accordion menu.but my problem is whenever i add any HTML control in any accordion menu than that menu gets open automatically during page load.so if i add HTML controls in each menu than all with get expand when page gets loaded.so plz help me its urgent.pl z
04/06/2010 - 11:53
A little help please :)
I used the code EvgenyUkraine posted above to fix the ContentHeight problem and it works beautifully, thanks!
However, I would like the text within the AccordionTitle class to look bold and change color while the accordion is open, then return to it's regular state when closed. I have no problem applying a hover state here. But the closest I could get to an active state working was when I got the color for the active state to show up on click, but wouldn't remain after the click, with the accordion open.
Any help with this would be greatly appreciated.
Thank you
04/12/2010 - 16:22
Textbox help please
If there are textboxes in the 5 accordion containers, how do you position cursor automatically in the textbox in the opened accordion menu container.
06/04/2010 - 16:18
hey is there a way to make a link so that when that link is clicked it opens up the relevant level on the accordion??
thanks in advance =D
06/04/2010 - 17:06
Make an anchor and hook its onclick event
to run the appropriate accordion.
-->
<a onclick="runAccordion(n);">My Link</a>
06/04/2010 - 18:40
but I’m going to need something that can work within a menu so when a user clicks the link they are taken to the page containing the accordion, the link would of then opened up the corresponding link on the page....if that makes any sense ?? lol
for example, would something like this work??
<a onclick="about.htm#runAccordion(n);">My Link</a>so the link doesn’t have to be on the same page as the accordion
06/06/2010 - 14:32
bump
06/07/2010 - 11:45
You could use GET arguments in your request.
Then in your load function check the argument and run the appropriate accordion. Here's a tutorial I found on parsing GET arguments.
06/10/2010 - 07:39
hmm interesting, i've never used get arguments before and im still not sure how to implement it for my needs =S
09/22/2010 - 10:28
Hi, I have the exact same question and couldn't find any solution.
anyone can help please?
It's much appreciated.
06/13/2010 - 14:26
Thank you very much for the nice and clear explenation.
I would like to make a little adjustment to the effect.
Is it possible to change the effect so you don't have to click on the header but just stand over it (stand on the header and also the text underneath it).
And it closes when we get out.
I've tried to adjust the code, but it want work with me.
any suggestions?
Thank you very much.
09/17/2010 - 20:00
When using IE 8, how do I stop the scrool bars from appearing which makes the web page looks like it shifting? It works fine with Navigator. I am a newbie and would like to know if there is a fix. Web Site url is http://bsangler.50webs.com/
Thanks
10/07/2010 - 08:12
does anybody know how to make in this script a function that expands all items? sorry but i am newbie in javascript and i would like to see how such code is been written.
thanks in advance
Dimitrios
10/22/2010 - 19:01
Very, very helpful, thank you!
11/18/2010 - 16:02
Hello, was wondering if someone could help. I am very new to this whole js thing. I have completed the instructions above and now have the accordian menu which is Fabulous, thank you to all. My problem is that when I click on any of the links in the ul li it loads a page but the menu keeps collapsing on me and I have to reclick the top heading in order for the menu to be seen again. Could any please help? I would be extremely greatful!
Forgot to mention, I am using a dwt template the site which is where I put the code
11/19/2010 - 22:49
it would be awesome if the code was commented!
12/09/2010 - 17:24
Hi,
Thanks for the beautifully explained script. I need to add the expand all and collapse all functions for this accordion menu. Please let me know how can I do it.
12/17/2010 - 12:06
Does anyone know how to stop the accordion animation? I don't want the animation to occur on a page redraw. I use it on my master page and then restore the last accodion that was open when a user moves to a new page. That is the moment I don't want the animation to repeat. Any suggestions? thanks :)
12/17/2010 - 15:15
There is a global variable:
You can try changing this to 0 before setting the accordion index. Basically you're telling the animation to take 0 milliseconds, so it should just pop open without any animation.
Remember to set it back to 250.0 sometime later, so the effect is visible when users start switching accordion entries.
12/20/2010 - 19:29
Setting TimeToSlide to 0, does not work. It just never opens the accordion section up. It does work when you set it to around 75 or higher. It's faster, but still probably annoying to the user.
12/21/2010 - 14:06
I found a better solution that does not look too annoying. By modifying the js code to include an additional parameter to the animate function, called sgl. if sgl = 0, then animation is required. If sgl == 1, no animation, draw the entire block immediately.
snippet within animate function:
if (opening != null) {
if (opening.style.display != 'block') {
opening.style.display = 'block';
}
if (sgl == 0) {
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
else {
opening.style.height = (ContentHeight) + 'px';
}
}
In other words, when redrawing the form, establish the opening.style.height to the full height of the section instead of allowing it to be broken up for animation iterations.
12/24/2010 - 04:59
Hello, thank you for the awesome script! I am new to jQuery and following the tutorial, the accordion works perfectly which I'm grateful for!
I have a question though and hopefully someone could help.
I have included the mouseover script with it and was wondering what codes do I have to put into the current jQuery scripts to have the transitions of the accordion go smoother/slicker on hover?
Thanks!
12/29/2010 - 17:38
Wonderful tutorial - works great, except I cannot see any reference to padding of the accordion title and accordion content -- I want to left align the text with 20px padding, even if I add width & max-width to the css. If I get it to work in IE then it doesn't work in FF and vice versa -- has anyone used padding that displays properly in all browsers?
Thanks.
01/11/2011 - 02:35
Hi This is wonderful.. I have used the code above (to open multiple accordions). Can any one please tell me how to change the +/- when accordion opens and close.. Also can any one please tell me how to expand all and collapse all ?? i am new to JS.. any quick help would be greatly appreciated.. Thanks in advance..
03/15/2011 - 06:26
Hi great code. Would it be possible to do a horizontal accordion
03/26/2011 - 04:22
Bear with me here, since I'm a novice at php and javascript.
I want to use the accordion function on a Wordpress blog theme, presenting the blog posts themselves as accordions that open and close, showing each blog posts' contents when the title is clicked.
Here's my question: How do I set the runaccordion index to change dynamically in the wordpress theme for each blog post? Here's what the individual accordion container wrapped around the php code to get the posts looks like:
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<div class="jobname"><?php the_title(); ?></div>
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<div><?php
the_content('More »'); ?>
</div>
</div> </div>
As it stands with the code like this, every time I click any of the post titles, only the first one on the list opens up, because the index number is set at "1." How do I make the index change dynamically instead of being set at "1" by default?
03/26/2011 - 04:25
nevermind, just realized the php code i need to use is already in that code. what a doofus...
03/28/2011 - 07:29
Hey !
I would like to keep the submenu opening when i'm on the submenu page. The website : http://lateliermadelaine.fr/francais/index.php
On the page PRESENTATION/RESTAURATION the menu keep closed
Is it possible to keep opened ?
Thks
04/12/2011 - 15:39
What do I save the js file as?
04/20/2011 - 17:03
Hi,
on IE7 and 6, the sub menu don't appear. How can i resolve this problem ?
Thanks !
--
Rose
05/03/2011 - 14:26
hi,
may I use this Accordion on my website?
Thanks for answeres
Greets,
Dennis
05/03/2011 - 15:51
Yes you can. All of our code is free to use for whatever purpose. Here's our full license for more information.
05/04/2011 - 06:54
okay thanks
But i don't undestand this license.
Shall I put this copyright in the code, or on my Website or..?
Thanks for help
05/04/2011 - 14:14
Here's the summary version:
Do whatever you want with the code. Anything. It doesn't matter. We don't care. We're just not responsible for any apps that use our source code.
05/04/2011 - 07:57
hi,
i got still another question:
If I want to use this code twice on the same Site, what do i have to change in the Javascript code? I tried it, but it didn't work
(I Hope you Understand my english ;), im 14 Yars old, and german :D)
06/08/2011 - 01:37
An awesome code which is useful for browser Compatibility, and friendly user interface.
Nice effort
Congrats.
06/11/2011 - 15:37
Anyone know how to modify the js so that the menu stays persistently open when going from page to page?
Ie. If Accordian3Content was opened and a link was clicked in that submenu, when the next page comes up, the accordion menu is still open at #3 (instead of reverting back to collapsed at each page reload).
Thank you for your time,
--Jim
06/16/2011 - 14:29
I have this same issue with a similar version of the code. It seems to stay open with Firefox, but not IE. Any help would be great.
06/16/2011 - 06:56
Hello,
First of all thank you for this tutorial it is great and this website is great, going step by step really helps : )
I have a question as I did an accodion based on this code I was wondering if I could get an answer to my question, which is :
I would like to create a link to a specific part of the accordion, paragraph, text or image. So far I link to the page, but the accordion does not open. As I am not an expert in javascript I dont really know what script I am suppose to add to make this work.
I know how to do it with html with the
<a name="">tag but part of that I am quite lost.Can someone please help me with this?
Thanx in advance
Diana
06/23/2011 - 23:56
thank for the this script
1 Q? is there a way to get it to load the page, but have a div open say "Accordion3Content" I tryed onload="runAccordion(3);" on luck and yes I am very bad at JS
<div onclick="runAccordion(3);" onload="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 1
</div>
</div>
thanks
06/24/2011 - 20:57
g0t it
add this after the div you would like to be opened at start
<script type='text/javascript'>runAccordion(3);"</script>06/24/2011 - 00:07
no luck
sorry :]
06/29/2011 - 06:41
Is it possible to incorporate these codes in QT?
I can't do it /cry
08/17/2011 - 01:57
Good!!!! how can I change it to so that it slides horizontally
08/29/2011 - 16:48
Thank you so much for the code...
I don't know much JavaScript. What do I have to change in order to add more accordion options? I want 13 instead of 5. Any help would be great. Thanks!
08/29/2011 - 16:56
I apologize... It was incredibly simple, I just overlooked it. Thanks.
10/03/2011 - 00:01
could you let me know how? I can see how to add new sections in the html, but the additional 2 I added aren't sliding at all. thanks
10/25/2011 - 09:06
me to have same confusion, how to add 5 more accordions? i added in that xml part but it's not working. Any help please... tnks..
08/31/2011 - 05:42
I have managed to include the accordion menu in my webpage but i can get it to do exactly what i want. Can someone help please? I have a part number which when you hover over it opens a onmouseover popit menu with 2 subpart numbers. This is where i want to include the accordion menu, so you can then click the subpart and an accorion menu will open from there. Any ideas?
09/01/2011 - 11:57
Great script. Thank you. One question though - what code change would I have to make to change the color of the AccordionTitle text when it is selected? Right now, everything defaults to white in my stylesheet. I would like to change the text to a different color when selected. I tried this code bit, but it doesn't do anything:
Thanks in advance ...
09/03/2011 - 13:13
One question: How might I alter the menu to keep the accordion content open when the links are clicked? In other words, I open the title, proceed to click on whatever link (i.e. "page1") which brings me, naturally, to page 1 - however I would like the accordion menu which includes the link "page1" to remain open when "page1" is visited. This is assuming that the home page and "page1" are identical except for a div or two, but both pages include the same menu. Does that make sense? I sure hope someone can help.
09/12/2011 - 06:00
I have varying amounts of text to show in each accordion. How can apply an almost 'automatic' height restraint that will finish at the bottom of the final line of text rather than set at a fixed height?
09/16/2011 - 07:34
Hello I have a question, does anybody know how to add a plus and minus on the accordions?
Before clicking it's on plus and when clicked and that the accordion opens it's on minus.
Please that will really help.
Cheers
09/16/2011 - 07:35
Hi there,
is it possible on page load that 2 accordions are open?
thanx
09/22/2011 - 04:27
I don't know if is the best way, but for plus and minus you can just add an image and use the css sprite.
When the menu is close, it upload the img A (minus) and when you click it upload the image B (plus).
09/22/2011 - 10:54
I don't see any unique change in title, based off of which I can change CSS property. Can someone let us know how can we add/swap classes in javascript based on open or close stage? Thanks in advance.
09/22/2011 - 05:19
How can you change the style to a different style after onclick?
Great code btw! :D
09/30/2011 - 05:05
Thanks a lot for this. saved lot of time.
10/13/2011 - 02:05
Thanks for this articles topics
11/02/2011 - 10:35
If anybody still looking for a "minus" and "plus " issue i've found a great script for this:
Put this in an external js file or in the tag
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="/images/plus.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="/images/minus.png">';
}
}
And in you html, near inside of the "AccordionTitle" after you (or what else you use for write the title) put this:
I hope this is helpfull for somebody like how was for me!
11/02/2011 - 11:54
Anyone know how i can leave the first accordion every time open even if i open the second or third accordion
11/11/2011 - 05:19
Hey guys,
first, thanks for the script, very nice one.
But I got a little problem. I'm using those accordions for my navigation. And the point is that if you click on one button, you get directed to the next page but all accordions closed again. But I want the current one to stay open on the new page. Point is that I got around 300 pages and I'm using the same navigation on all pages. I dont want to change something in the code cauz I'm using includes. My idea was to modify the javascript so that the current accordion stays open and put the javascript into the head of the current pages. Since I'm bad in javascripts I hope anyone can help me or got an idea what I need to change in the javascript.
If it's neccesary I can post the link to the page or any code snippets.
12/27/2011 - 11:01
I changed a little, for the case of different amount of lines (more lines = higher optionsheight).
function runAccordion(index,optionsheight)
{
ContentHeight = optionsheight;
in body goes
01/16/2012 - 19:18
Did anyone ever find a way to keep an accordian panel open across multiple pages, so that a particular penal is open on page load?
I've tried the examples posted here without success.
01/16/2012 - 19:31
Not it works.... always the way! Used
01/20/2012 - 04:24
Is there a specific doctype for using this code? Using XHTML 1.0 Transitional generates a validation error for the attribute "onselectstart" used in the HTML code
Any help with this would be appreciated!
02/03/2012 - 02:17
Use XHTML 1.0 STRICT
02/03/2012 - 00:56
how the 1 accordion open when the page load