The updated accordion script is available here.

This JavaScript accordion is only 1.5kb. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.

slider.init('slider',1)

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the source code.

Updated 5/27/2008 – Slightly minified the code cutting off 1kb and added the script into a global namespace.
Updated 6/19/2008 – Shaved of a few bytes and added change the “c” variable to identify which section to be expanded onload.

Posted by Michael in CSS,JavaScript on April 18, 2008

106 Responses

Well done, the effect and animation are very elegant, especially for a framework-free script.

Tobias on April 23, 2008 at 2:57 am

Very good. Why don’t you make all this accessible by the use of keyboard (tab + space/enter)? Accessibility is very important. And what about those who doesn’t have JavaScript enabled? Is this going to work?

Sorry bad English.

flashfs on April 24, 2008 at 9:55 am

@flashfs – I will take a look at incorporating keyboard navigation, thanks for the suggestion. If JavaScript is disabled all of the boxes would simple be expanded, it degrades nicely.

Michael on April 24, 2008 at 10:22 am

Hello Michael.

Great work on this script. It works fantastically. I have it working in IE and Firefox perfectly. I have not tested Opera yet, but I do know that Safari has an issue with it. Upon hovering your mouse over the togglers, the toggler background turns a whitish color.

Sean Cheatham on April 27, 2008 at 1:15 pm

@Sean – Thanks for the comment. I had not noticed the demo on this page was gone (back now) but it does work in the latest version of Opera without any issues. Or you can go to http://sandbox.leigeber.com/slider.html. What version are you using? I will definitely check it out when I get a version from you.

Michael on April 27, 2008 at 1:31 pm

Hi,

Works perfect, great script. Only thing is that it stutters al little in Firefox? But it’s really smooth in IE. Any ideas how I could sove that?

Bas on April 29, 2008 at 2:15 pm

@Bas – The primary reason for that is the top two boxes have almost the same length of content. Check out http://sandbox.leigeber.com/slider2/slider.html which demonstrates a more realistic example where the content is of different lengths in each box and therefore the bottom bar has to move instead of just sitting in place and shaking. I updated the demo so it didn’t show the issue as badly. I have no idea why Firefox does it but to implement a fix would not be pretty. Definitely open to suggestions.

Michael on April 29, 2008 at 2:25 pm

Thx for the quick reply. Why wouldn’t it be pretty to implement a fix? ;) If it would work just as smooth as it does in IE, that would be really nice.

Bas on April 29, 2008 at 2:33 pm

@Bas – The end result would be pretty but my thoughts on how to alter the code to force it to look more fluid are not. Take a look at it in FF beta which will soon be released… very smooth. I imagine most FF users will upgrade very quickly as apposed to the rate at which IE users typically migrate. I will give it another look and if I find a resolution I will update the post. Thanks.

Michael on April 29, 2008 at 3:10 pm

Great Idea!! I think that include it in my pages!! It’s tooooo easy!!

Bye!!

DottorZed on April 30, 2008 at 5:05 am

Nice. I’ll give FF beta a try, thx! Looking forward to it.

Bas on April 30, 2008 at 7:31 am

Great!
Only one problem with JS disabled: header 3 disappears completely :( (

(Win 2000 with Firefox 2.0.0.14 and web developer toolbar to switch JS on/off)

Pierluigi (Italy) on April 30, 2008 at 7:47 am

@Pierluigi – The demo above is in an iframe so when JS is disabled they are all expanded and therefore the last one expands below the height of the iframe. You can visit the page directly at http://sandbox.leigeber.com/slider.html to try again.

Michael on April 30, 2008 at 7:52 am

Well, you’re right!
It would seem quite impossible you hadn’t tested it deeply ;)

Thanks for your quick reply!

Pierluigi on April 30, 2008 at 7:58 am

But when I print the page out, I need all text to be printed. Please include CSS print styles that will ensure all text within the slider is actually printed. Can you do that? It would be perfect then :-)

Henry on April 30, 2008 at 11:02 pm

@Henry – It would actually not work as you are used to unless JavaScript is disabled. Since the JS goes through on page load and collapses the divs after calculating their heights any print CSS would be irrelevant. You could create a print button and call a function to expand all the divs and then call the window.print() function. Probably not what you are looking for but if you decide to go that route and need help just shoot me an email.

Michael on April 30, 2008 at 11:21 pm

Is it just me, or does the text section look really terrible in IE6? Like it’s been scaled or something?

Pete on May 06, 2008 at 2:19 pm

@Pete – Just tested more in IE6 and don't see any issues. The text looks just like it does in other browsers. If you could send a screenshot to me I can take a look. You might also try testing the slider directly at http://sandbox.leigeber.com/slider.html. Thanks for reporting the issue.

Michael on May 06, 2008 at 3:04 pm

Thanks Michael, have dropped you an eMail. The only difference I can see is I run IE 6.0.2900. I tried it on your direct link and again it looked bad. Pete

Pete on May 07, 2008 at 7:12 am

Hey Michael,

This is a nice script and i would like to put it in a site.. With FF this is nice, but with IE (6 and 7), there is a weird thing.
If you can take a look at http://www.gestisoft.net/ftps/nicolas/bdh you will see that “ANGERS” “PARIS” “SAUMUR” is very unstable on IE ..

I dunno why

Buzz on May 13, 2008 at 3:03 pm

@Buzz – Your site is looking very nice. There are some issues with your markup which may be causing the issue. Try running your site through the W3C validator and you will see a number of errors. Right off I don't see anything in the accordion markup itself that raises any flags. Once you get it closer to validating shoot me an email and I will take another look if the issue persists.

Michael on May 13, 2008 at 3:21 pm

Michael – Can you have the accordion stay active (ie. with hover open) on certain pages? If you click within a submenu (which is what I am using it for) on the next page it closes the element.

Paul on May 21, 2008 at 12:06 am

@Paul – A little confused as to what you are asking, the answer is probably yes with some customization. You refer to it staying open until the next page opens… shoot me an email and a link so I can check out where you are so far.

Michael on May 21, 2008 at 7:57 am

Great work! Can you do this same accordion, only horizontally? i would love to use it on a site.

Abraam on May 24, 2008 at 8:08 pm

Is it possible to alter the code so that all content is hidden upon page load?
If so what might need changing?
Thanks

dflynn on May 31, 2008 at 12:00 pm

@dflynn – You could just change the CSS, no need to alter the JavaScript. Shoot me an email if you have trouble.

Michael on May 31, 2008 at 2:09 pm

Ahh! Got it, in the <body onload=”slider.init(‘slider’,1)”> tag, I didn’y realize I could change the 1 to a 0 to achieve this. Thanks for the help!

dflynn on June 01, 2008 at 7:48 am

this script seems to be having issues when i use paragrph tags in ie6 the bottom of the text gets clipped by around half a line.

http://79.170.40.161/cncareers.co.uk/index.php?option=com_content&view=article&id=4&Itemid=10

is this a known issue or do i need to make changes to the js? i have played around with it but cannot get it to display correctly in ie6.

Tom on June 09, 2008 at 7:25 am

@Tim – Shoot me an email with a zip of your accordion including the content. Should be able to resolve the problem in the CSS but it is hard to look into without your code in front of me, especially in IE6.

Michael on June 09, 2008 at 9:06 am

Hi,
How can i use it on a page that has a Master page
Thanks,
Winceth

vVinceth on June 09, 2008 at 12:41 pm

@Michael – Can you place a “+” when a tab is minimized and then just replace it with an “-” ?
Thank you, you’re doing a nice job here.

vlad on June 10, 2008 at 9:48 am

@vlad – This could be accomplished through the CSS possibly or though JS. I don’t think I will be adding it to my accordion here, if you need help implementing it yourself shoot me an email.

Michael on June 10, 2008 at 3:09 pm

Wonderful code and very diverse. I can use this on any type of site and it would look wonderful.

Michael. Do you mind looking at this code and telling me why I cannot get my first slider to open using the “slider.init(‘slider’,1)”

<div class=”colTwo” id=”slider”>
<div class=”bloc_top”>
<div class=”heading9″ id=”one-header”>
<h2>HEADING</h2>
</div>
</div>
<div class=”bloc” id=”one-content”>
<div class=”image12″ ></div>
<div class=”contentblock” >

<p>CONTENT</p>

</div>
</div>
</div>

Culvi on June 11, 2008 at 2:52 pm

@Culvi – Is the <div class=”bloc_top”> necessary? Shoot me an email with a link to your demo or a zip of the entire accordion code you are using.

Michael on June 11, 2008 at 8:56 pm

Michael,
How difficult is it to convert this into a nested accordian? Have you dont this already?

Thanks
Venky

Venky on June 13, 2008 at 9:05 pm

@Venky – I have not done it yet but it would not be a hard thing to do. Shoot me an email if you try it and run into problems.

Michael on June 14, 2008 at 3:27 pm

I need 2 differents box in the same page, how I can make this?

jose.rojas on June 14, 2008 at 4:06 pm

Thanks for your great script. I have implemented it on my website (for the faq’s). But I have one question though. I noticed that the full content of the accordion is displayed in the browser when it loads the page. Once it is done loading, the script closes the accordion (with slider.init(‘slider’,0)). Is there anyway the script can be configured to not show the content of the accordion during load time ?

Jan Alphenaar on June 16, 2008 at 8:27 am

@Jan – Since the total height of the div must be calculated to pass into the animation function the content must be displayed at some point. In your situation it may make the most sense to calculate the height once a user clicks on a section and not onload. The calculation should happen so quickly you don’t see the flicker. Shoot me an email if you need help working it out.

Michael on June 16, 2008 at 10:35 am

Michael – That is a great clean code! In your code, by default the first header is open (if enabled) – how can I make the second (or third, etc.) header open as default?
Thanks, Alain.

Alain on June 16, 2008 at 4:03 pm

@Alain – Shoot me an email and I can help you work through it. A little JS modification will be needed, nothing too difficult.

Michael on June 16, 2008 at 4:05 pm

Is there a way to improve performance? i heard from multiple testers that this is very slow on their machines. like.. is it possible to increase the step size in the animation algorithm?

omega on June 17, 2008 at 11:42 am

@omega – Sure, there are variables to speed things up but I cannot imagine there being a performance issue unless you are on an original Intel. Of course different browsers will handle the speed a little differently. Shoot me the details via email so I can investigate. Thanks.

Michael on June 18, 2008 at 8:17 am

On the headers, is it possible to make the text alone a link to another page, but allow the box to activate the accordion?

Eddie G on June 18, 2008 at 3:42 pm

@Eddie – Sure, you could just an an <a href in there. It might be a little confusing to work with though as a user.

Michael on June 19, 2008 at 8:09 am

This is some VERY nice scripting, Michael. And after having browsed several of your other JS utilities, in my opinion, you are light years ahead of most who consider themselves gurus. :-) What I am amazed at most of all is the SIZE of your JavaScript. Unbelievable!!?!! I found several accordions before discovering yours. One: http://dbajax.sourceforge.net/ … my GOD!…the amount of JS needed to run it (and not EVEN so smoothly) was a scary sight to see.

But to revisit Jan’s posting (Jan Alphenaar on 16 Jun 2008 at 8:27 am) and your reply therein, with any page that has a lot of content…seeing the entire table loaded before the accordion snaps to the collapsed position is not so pleasant. If you are willing and have the time to share, I would be very interested to hear how it is possible to “calculate the height once a user clicks on a section and not onload”. I set-up a temp page with additional content below the accordion in order to see the delay before the accordion’s collapsed state: http://www.quikstage.com/test_slider.php

Again…Awesome Coding!

David

David Carriger on June 23, 2008 at 6:59 am

@David – Thanks for the feedback. Basically all the divs would initially have their display set to none. Then, the first time a user clicks and individual section the script would momentarily expand the section just long enough to calculate the offsetHeight of the div and then reset the height to 0px. Shoot me an email if you need help with the code.

Michael on June 23, 2008 at 1:49 pm

Hello Michael…I attempted adjusting the class=”content” divs to display:none, but of course, this simply negates the ability to ever SEE those divs, right? :-)

I am thinking that there would need to be some sort of onclick command applied to the now hidden “content” divs in order to have them show again, am I right? And since these divs are all manipulated through ID’s in the slider.js file, I am also thinking that is where the manipulation would have to take place.

Yes, thank you…if you can share with me how to code this, I am all ears. :-)

David Carriger on June 24, 2008 at 2:20 pm

Thanks for the script Mike, it works perfectly . . . one thing though, is it possible for expanded elements to stay expanded unless it’s clicked again?

the SaNdMaN on June 26, 2008 at 1:10 pm

@the SaNdMaN – Sure, you would just need to comment out a few lines of code. If you cannot locate what needs to be removed let me know and I will point you in the right direction.

Michael on June 26, 2008 at 8:21 pm

Hello,
Just a question : what have I to change on the code if I want the same effect with “onMouseOver” ? It is possible ?
Thanks

Metcalfe on June 30, 2008 at 2:46 am

@Metcalfe – That should be all you have to change, just the mouse event on line 10. If that doesn’t do it shoot me an email.

Michael on June 30, 2008 at 6:13 pm

I don’t know if this has been answered earlier, but here it goes. Is there a way to define the active accordion header. For example if I want a green background for the header of the active accordion but blue background for the non-active accordion’s header.
I hope you understand my issue.

Thanks in advance!

Henri on July 01, 2008 at 2:55 am

@Henri – I totally understand your question. Right now the headers are only using the :hover CSS property. To accomplish what you are looking for you would need to change/append the class name to the header within the JavaScript itself. Shoot me an email if you can’t figure out where to place the update in the script.

Michael on July 02, 2008 at 7:58 am

wondering about using this, but need to have all of the sections defaulted to closed.

this possible?

CX on July 07, 2008 at 3:40 pm

I love the slider code – nice job!

Sorry to return to a topic already covered (16 Jun 2008 at 10:35 am) but I don’t know enough about javascript to make the adjustments to not display the contents on load. Have you put in the time to make the adjustments and if so, would you be willling and able to email me adjusted code?

Thanks!

AC on July 10, 2008 at 1:52 pm

@CX – Sure, remove line 13 and the else statement on line 14.

@AC – Take a look at the source – http://sandbox.leigeber.com/slider5/slider.html

Michael on July 11, 2008 at 5:57 pm

Thanks! Really cool and easy to implement as well!

Salman on July 28, 2008 at 7:45 pm

Great code. Nice way you answered everyone’s questions too :-)
FYI added to delicious, digg, and stumble
I will send you a link once I have it working in my new moodle-based website. Have a great weekend.
Jamie

Jamie Robe on August 01, 2008 at 7:12 pm

great lightweight javascript :)

sandeep parkhande on August 05, 2008 at 5:42 am

Hey, great code, and I have to give you a shout out for how quickly you reply!

I could very well be having one of the greatest brain-farts in the history of mankind, but why doesn’t the javascript seem to refresh when I go to a page and return back using the browser’s back button as opposed to another link or direct absolute URL entry?

Any click causes the accordion to close and remain unopenable…not a word. Non-expandable. That’s better.

brushie44 on August 13, 2008 at 2:42 am

I have the same question as CX on 07 Jul 2008 at 3:40 pm:

I need to have all of the sections defaulted to closed.

What exectly do I have to remove, because when I remove line 13 and the else statment in line 14, it doesn’t seem to work anymore.
Kind regards,
Anna

anna on August 15, 2008 at 10:00 am

Sorry, I think I have suddenly found the answer. “block” in line 14 must become “none”

anna on August 15, 2008 at 10:06 am

Is there a code here to have this feature reversed in a way. It would be very nice to have the content hidden on default and have to click a “header” to see whats inside each one.

Richard on August 15, 2008 at 2:20 pm

Hi Michael,

I’m very impresed with your work!

This is what I was looking for :)

I have one question: I would like to include two buttons (expand all and collapse all). So when expand all button is clicked, all divs become visible… and when collapse all is clicked, all divs collapse.

Sorry if this question was raised berofe, but I haven’t found it.

Best regards, Marko

marko on August 20, 2008 at 7:16 am

In the comments about the closed default position… I changed “block” to “none” per Anna’s suggestion, and the slider defaults are closed, and I just about have it near perfect… but when you do the initial click on the header, instead of the nice flowing animation, it snaps really quickly. Then, all other animations are smooth as expected. How do I get that initial animation to flow normally, as the following do when you select the header? I know it’s kind of picky, but the details really help polish the effect.

Nate on August 21, 2008 at 4:36 pm

@brushie44 – Not exactly sure why the back button would keep the state… an onload even should run any time the page is hit not matter how. As for the second issue I would need a link to take a look.

@Richard – I think anna figured that out in the commend right above yours. Take a look.

@gianluca – I think it has to do with cleartype but I will look for your emails as I try and go through them tomorrow night.

@marko – You could modify the current functions or just add another that loops through all the divs in your accordion parent and if it contains ‘-header’ then set its ‘-content’ counterpart to display:block and visa-versa.

@Nate – After a quick glance it looks like on line 13 the others are getting their height set to 0px, you need to modify the script to set the first one to 0px as well.

Michael on August 24, 2008 at 9:17 pm

I love this effect, but cannot seem to get it to work. Not sure why. It loads as expected (with the first one expanded), and when I click the header of either of the other two, it does, in fact, expand as expected. However, once expanded, none of the three will contract.

Please note that I’m using this on an Intranet, which means two things: (1)I can’t show you my page, and (2)all users are on Windows XP Pro with IE 6. As far as I can tell, javascript isn’t turned off.
I loaded your CSS code into my current CSS sheet. I left off only the BODY line. I kept the .js file as is, placed it in the same folder as the HTML page, and placed the SCRIPT tag in the HEAD section.

I’m really scratching my head on this. I can’t imagine that missing BODY line from CSS is responsible. Is it the version of IE that we’re on?

James Williams on August 26, 2008 at 2:36 pm

Wow. I have spent about 3-4 hours examining your code and just don’t understand why it works for you and not for me. It’s exactly the same. I even placed that line about the BODY back into the CSS. The only thing I can think of is that I might have something else in my CSS that has the same name or ID, but I haven’t found anything and I have looked thoroughly.

Ah well. It was a nice thought.

James Williams on August 26, 2008 at 3:35 pm

I agree with Nate, when line 14 set to “none”, it opens in a snap. I have set the script in the original state now, with no changes, and it works perfectly well when I make only one simple adjustment in the html-file: <body onload=”slider.init(‘slider’,1)”> must become <body onload=”slider.init(‘slider’,0)”>
Then all the sections are closed when the page opens.

anna on August 30, 2008 at 12:04 am

Hi Michael, I’m having the same problem as David Carriger on 24 Jun 2008. When the page loads all of the content is visible for a second before closing into position. Could you possibly explain what needs to be changed in the code to fix this?

Susie on September 03, 2008 at 3:35 am

This is an awesome script. I’m using it to replace the script found at http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm. Your script is much smaller! One thing that I would like to know is why on ie6 and ie7 the text looks distorted. It is almost impossible to read. When visiting your page: http://sandbox.leigeber.com/slider.html the text is is distorted only on ie6.

Jose A. Carrillo on September 07, 2008 at 9:51 am

hi,
i’d like that when i open a slide, the previous one remains opened instead of closed.

what can i change in the script to obtain this?

thanks

mark on September 09, 2008 at 2:42 am

Michael-

Great script. I search through many scripts to find one that after my customization would work properly in all browsers. Well, I recently notice an issue with Safari. When I visit the page on my site the source code seems to load but nothing renders. Refreshing the browser doesn’t help. Now if I navigate away from the page and back…Voila, it works wonderfully. Got any thoughts?

http://www.sidedishdesigns.com is the site. You can find the accordion at http://www.sidedishdesigns.com/links.html

Thanks for your time.

Zach on September 12, 2008 at 6:46 pm

Hi,
i like to know if there is a simple way to have an a:active class in the accordion, so we can customize its appearance with css while it is open.
hope understand! great script, so liitle code, thx anyway.

panx on September 14, 2008 at 6:59 am

Thanks for sharing. Are there any known compatibility issues?

Ted on September 14, 2008 at 2:03 pm

Maybe i don’t explain very well in my first post.
When the accordion is open the header is the same like it is closed. For example if I want a blue text color for the header of the active accordion but green for the non-active accordion’s header, i can’t do it.

thx again.

panx on September 15, 2008 at 6:05 pm

Hi there, nice compact slider.

I need to create a custom slider but with unequal content areas for a project I’m working on.

Is there any chance of uploading an uncompressed version so I can follow the thought process

mike?

mike foskett on September 16, 2008 at 4:21 am

Micheal – awesome script!

just wondering how easy it would be to add in (as panx mentioned) the ability to swap out things on the headers like text colour Background image/colour so that they persist on the “active” header – but would then revert to the default styling when you open another..?

Its already a very aesthetically pleasing, not to mention compact menu :)

Anyway, just something for you to consider

Jason Rogers on September 16, 2008 at 2:37 pm

images are not found, which has been mentioned in style sheet in source code which is been provided. can u provide those images.

bhavya gupta on September 23, 2008 at 7:17 am

hey i forgot thanks only :)
i have made use of this code for one of the website which I’m building.

bhavya gupta on September 23, 2008 at 7:19 am

Very great accordion menu. Easy to use and easy to manipulate. Great work!

Tony on September 24, 2008 at 8:58 am

Love the script, and thanks for making it available to all. I’m experiencing the same problem as others (zach for example): all the content appears in the first load, but then gets hidden. It looks like http://sandbox.leigeber.com/slider.html does the same, too. And I’d like to know how to make the active slider show that it’s active…

Ivanov on October 01, 2008 at 7:30 am

Hasn’t anybody notice that this text looks funky when you display it? It gets all pixelated. Is there anyway to fix this?

E on October 01, 2008 at 12:32 pm

Ive found the best way to use this script is to use the DIV’s to wrap tables (which allows for more functional styling, use of more images if needed)

Remove all styling from the DIV’s themselves (ie. border, padding, margin all set to zero) retaining only basic positioning and of course the overflow:hidden; styling (important) on the content DIV.

how i lay the script out looks like this

DIV slider

DIV header
TABLE (with desired heading layout)
close TABLE
close header DIV

DIV content
TABLE (with desired content layout)
close TABLE
close content DIV

close slider DIV

Make the tables as simple or as crazy as you like but i found this resolved all styling issues with the content :) hope this was of use to those struggling to make it look right, any other display issues – refer to the example just to ensure you arent missing anything.

Jason Rogers on October 10, 2008 at 7:06 am

Impressive work, Michael, thank you!
I have the same question as Abraam: how could I make this accordion horizontal? I’d like to use it as a menu on a website and it would be exactly what I’m looking for. Does anybody know what should be changed in a code?
Greetz :)

Magenta on October 10, 2008 at 6:24 pm

Hi Michael, thanks for the great script! Forgive me if this has already been asked. I have your accordian script working beautifully on my page. Unfortunately, it’s embedded in a tabbed system where all of the content for all 6 tabs is listed in one page. Your accordian code is within tab 2. I have everything but tab 1 set to display:none; in the main div so they don’t show until their tab is clicked. Unfortunately, with this parent tab set to display:none; the accordian (a descendant div) will let me close the default open link but not open any of the others. If I remove the parent div’s display: none; the accordian works great but then tab 2′s content displays on tab 1. Any ideas? Thanks in advance for your help! I’m a big fan of your work!

Caspergrl on October 13, 2008 at 4:59 pm

Hi again, please disregard my message above, we got it working:) We set tab 2′s info to hide on page load with javascript when accessing tab 1 and set the display:none property for the parent div also in the Javascript. This allowed us to keep the display:none in place which made the slider work but also allowed us to hide the content on the first tab. Thanks anyway:)

Caspergrl on October 14, 2008 at 2:16 pm

A very effectively done utility.
Thanx!

TomC on October 16, 2008 at 12:48 pm

WOW! something differents. Thank you.

Vitalia on November 08, 2008 at 11:10 am

Hi. I have been trying to get this script to work on my site as a side menu. I am wondering if anyone has been able to make an UL work in this and if so can you let me know how you did this? I got the list all set up but then the menu action quit. Now it is expanded all the time no matter what I do. Any help is appreciated.

sassygirl on November 09, 2008 at 7:30 pm

REALLYY GREAT WORK !!! I COULDNT FIND HOW I CAN CHANGE THE WIDTH OF THE ALL SLIDES . THERE IS A WIDTH ENTERY ON CSS PARTS I CHANGED ALL ONE . BUT THAT EFFECT NOTHING …
THANKS FOR YOUR ANSWER … PLEASE GIVE ME A DETAILED ANSWER BECAUSE I AM NEW AT CSS

Burak Yücel on November 09, 2008 at 8:00 pm

ignore my above question, somehow I got it working :)

sassygirl on November 09, 2008 at 8:09 pm

Quick tip: To leave tabs open even when you click on other tabs just replace this line of code.

else if(cd.style.display==’block’)
{
this.islide(c,-1);
}

with

else if(cd.style.display==’block’&&h==d)
{
this.islide(c,-1);
}

Amante on November 19, 2008 at 2:29 pm

Isnt there any answer about width ??? how can i change the width of accordion ?

Burak Yücel on November 23, 2008 at 9:53 am

Did the IE6 text issue get fixed? It looks fine for me when the page loads, but when I click one of the other levels, all the text in the slider goes bold and looks down right awful. Only in ie6.

leslie on December 09, 2008 at 8:46 pm

I noticed that the script works correctly on IE 6.0.2900.2180; but does not work correctly on others.

leslie on December 10, 2008 at 8:54 am

How to create an active selection in this accordion?

Crow on December 12, 2008 at 4:58 pm

hello guys,
Im trying to apply a tabbed acordian to my site however i dont want to disrrupt the present layout.

I have links at the top of the page that headshots, contact ect.
I would like only the link that is pressed to be visiable at any time.
The only part I wish to be visible when the page originally loads is my name.

Can any body help?

theActor on December 22, 2008 at 7:03 am
Comments are closed at this time.