This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example below…

<ul>
	<li><img src="images/1.gif" alt="" /></li>
	<li><img src="images/2.gif" alt="" /></li>
	<li><img src="images/3.gif" alt="" /></li>
	<li><img src="images/4.gif" alt="" /></li>
</ul>

To build the accordion call the function below onload…

slideMenu.build('sm',200,10,10,1)

The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

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 original script.

Click here to download the script that collapses onmouseout.

Update 5/26/2008 – Removed a line of unnecessary code and resolved an issue with IE6.
Update 5/26/2008 – Tweaked width parsing code, thanks to realazy for the suggestion.
Update 6/05/2008 – Added download for version that reverts back the the uniform collapsed positions.

Posted by Michael in Design,JavaScript on May 25, 2008

331 Responses

wow only 1kb, it’s amazing. well done

carlos leopoldo on May 26, 2008 at 2:19 am

Wow, only 1KB? You just blew my mind.

Yonghwee on May 26, 2008 at 2:37 am

This is soooo cool!!
Your blog goes right now into my rss feed.

Kep it up dude! You’re doing such a great work!

Cheers!

C on May 26, 2008 at 2:55 am

Simply amazing!! Really cool. :) Thanks for sharing it.

techzen on May 26, 2008 at 6:56 am

Excellent work, for a tiny weeny script…. Thanks for sharing.

muhammad on May 26, 2008 at 7:08 am

excellent. I have a galance at your code, and find:

var cw=parseInt(s.style.width.replace(‘px’,”));

in fact, use

var cw=parseInt(s.style.width, ’10′);

should be more clarity, I think :)

realazy on May 26, 2008 at 7:22 am

Have you done a vertical version that works this well and is as small?

Tom on May 26, 2008 at 7:33 am

Thank you all for the positive feedback.

@Realazy – Thanks for the suggestion, the ’10′ is unnecessary since the integer will always be the first in the width string. I updated the code and updated the post.

Michael on May 26, 2008 at 7:34 am

@Tom – If you look back I had a post in April with a vertical accordion. It functions a little differently but could easily be tweaked to work on rollover. Take a look and let me know if you have any questions.

Michael on May 26, 2008 at 7:36 am

Check out this menu as well
http://www.phatfusion.net/imagemenu/index.htm

Grundic on May 26, 2008 at 7:42 am

@Grundic – Thanks for sharing the link but looking at the script it is 2.5kb and that is just for the extension to the mootools framework (36kb). Definitely something to look into if you are currently using the mootools framework though.

Michael on May 26, 2008 at 7:52 am

Doesn’t properly work in MSIE 6.x. With 1.gif – 4.gif you only see 3 images.
When repating image 4 you’ll see 4 images… in MSIE. And you see 5 images in Opera :-)

Marc on May 26, 2008 at 8:25 am

@Marc – I am unable to replicate either of these issues. Please email me the specific versions of the browsers as well as your os and any other relevant information. Thanks for reporting.

Michael on May 26, 2008 at 8:35 am

Nice, is this a kind of stream-lined version of Mootools Slider?

Jake on May 26, 2008 at 2:59 pm

@Jake – Sure you can think of it as that, I am not trying to compete with the JS frameworks just offer alternatives to individual functionalities. Depending on your circumstances perhaps a full-blown framework is in order but I prefer to keep things independent when it makes sense.

Michael on May 26, 2008 at 3:12 pm

This is nice but it doesn’t degrade very well, I just get two buttons with JS disabled.

Ryan on May 26, 2008 at 3:54 pm

@Ryan – This one is a tough one to degrade perfectly. It might be beneficial to set the initial width of the li elements in the CSS to a % based on the total number of list elements. Of course there is no way to do that dynamically without JavaScript so I did not use that method in my CSS.

Michael on May 26, 2008 at 4:01 pm

Yep, working fine on Konqueror!

Great Job!

Ayoze on May 26, 2008 at 5:56 pm

Very cool script Michael.

Is there any way to replicate http://jeremymartin.name/examples/kwicks.php?example=1 a little more, in that they’re all initially collapsed upon loading and re-collapse after you hover off them?

I’m sure it’d add a bit more to the size of the script, but I’d be interested in seeing if it’s possible without clogging it up too bad.

Travis on May 27, 2008 at 5:45 am

I give you a digg! thanks for your script. I’m going to comment it in my blog after a few tests. Good Bye!

Sirviejo on May 27, 2008 at 6:13 am

Awesome work! I will put a link in my site

Ives on May 27, 2008 at 8:11 am

@Travis – The first part is already done, simple do not pass in the 5th parameter and they will all be collapsed. The other would be simple enough to implement, I will look into it and probably update the post and update. I should still be able to keep it <= 1kb. Thanks for the input.

Michael on May 27, 2008 at 8:18 am

Is there a way to load this somewhere besides in the body tag? My CMS doesn’t allow me to put any scripts in the <body> of the html. I have to put scripts in the <head> or somewhere down in the page.

Chris on May 27, 2008 at 8:50 am

@Chris – Absolutely, you can add the tag anywhere inside <script> tags. You can also use window.onload=function(){} in your JavaScript directly at the bottom. Shoot me an email is you have any questions.

Michael on May 27, 2008 at 8:53 am

Nice.
But why re-invent something that does already exist (as really more flexible plugins) in the Web 2.0 frameworks such as Prototype, MooTools, jQuery or EXT ?

Mr Web 2.0 on May 28, 2008 at 4:10 am

wow! excellent script.
I’ll try to use this on my new web page

thanks

Gustavo Ribeiro on May 28, 2008 at 6:34 am

Great script. It would be perfect if the accordeon would go back to its post loading position when roll out.

In my website, if i’m in categorie 3 for example and if i’m rolling over the menu and then staying on the page, it looks like i’m not on categorie 3 anymore.

Could you do something for that ?

ravaza on May 28, 2008 at 8:29 am

@Mr Web 2.0 – Possibly number of reasons depending on the situation… For example, imagine you only need this horizontal accordion on your site. Here are your two options…

Mootools – 22kb + Slider Extension – 2kb = 24kb and 2 HTTP requests
This Script – 1kb = 1kb and 1 HTTP Request

Why reinvent anything? To make it better.

Michael on May 28, 2008 at 8:36 am

@ravaza – It has been requested a few times so I will have that functionality added in today or tomorrow.

Michael on May 28, 2008 at 8:38 am

Wow, this is awesome. I would love to see a vertical version. Most accordion menu’s vertically move to much. Having something fixed like the overall width on the horizontal version is great. Why not on the vertical version? I’ll take a look at your April postings for the vertical version.

daveyp on May 28, 2008 at 6:51 pm

@daveyp – Excellent suggestion, it is now on the official to-do list.

Michael on May 28, 2008 at 8:56 pm

How can I have two accordions on the same page? I tried doing the following but it does not work:

<body onload=”slideMenu.build(‘sm’,200,10,10,1); slideMenu.build(‘sm2′,200,10,10,1)”>

<ul id=”sm” class=”sm”>
<li><img src=”images/1.gif” alt=”" /></li>
<li><img src=”images/2.gif” alt=”" /></li>
<li><img src=”images/3.gif” alt=”" /></li>
<li><img src=”images/4.gif” alt=”" /></li>
</ul>
Testing second horizontal
<ul id=”sm2″ class=”sm”>
<li><img src=”images/1.gif” alt=”" /></li>
<li><img src=”images/2.gif” alt=”" /></li>
<li><img src=”images/3.gif” alt=”" /></li>
<li><img src=”images/4.gif” alt=”" /></li>
</ul>

Ubaidullah Nubar on May 29, 2008 at 4:00 am

@Ubaidullah Nubar – You would need to modify the script to use prototype properties to run multiple instances. Shoot me an email if you need help.

Michael on May 29, 2008 at 8:37 am

Nice scripts there…And yes! It’s possible to do cool things in js without using a full featured 100Ko Framework :D keep it up!

Laurent on May 30, 2008 at 8:15 pm

Do you still expect to add the function I request or did you change your mind ? (sorry to ask again)

ravaza on May 31, 2008 at 5:58 pm

@ravaza – Sorry, I have been very busy the last few days. If I have time then I will get it updated tomorrow. Have already done some of the coding. I’ll shoot you an email when it is ready.

Michael on May 31, 2008 at 6:02 pm

Ok, I am having a brain spasm or something… cause I can’t get any links to show up under the individual sections…

Is there a functioning example I can check out?

Rob on June 01, 2008 at 12:43 pm

@Rob – Not 100% sure what to envision by links under the individual sections. Shoot me an email and we will get it worked out.

Michael on June 01, 2008 at 12:53 pm

Really nice looking and so smooth :-) Good Job!

Peter on June 01, 2008 at 5:33 pm

Sorry for my poor english and thank you for your good job !
I would like to know if I can make a link for each slide of the accordion ?
Thank you

Marie-Claude on June 02, 2008 at 1:30 am

@Marie-Claude – Absolutely, <li><a href=”#”><img src=”images/1.gif” alt=”" /></a></li>

Michael on June 02, 2008 at 8:17 am

Wow, now that is just impressive.

Rob on June 03, 2008 at 12:59 pm

Hi
Is there a way to get the animation to reset if the cursor is moved away?
Thanks

Adam on June 04, 2008 at 3:27 pm

@Adam – Quite a few have requested that functionality. I have been busy but will have some time tonight so check back in the morning for an update.

Michael on June 04, 2008 at 3:29 pm

I have been playing around with this for a bit now and the latest feature is great though from a styling point of view i do not seem to be able to add any padding between the images, I know from the images you have used above you add a border manually but when I add this border either via a border-right:5px solid #fff; or padding: 0 5px; the menu breaks in that the final image (I’m using 6) drops a line, this happens regardless of the width I use.

Any ideas?

Adam on June 05, 2008 at 4:22 pm

@Adam, shoot me an email with the link and I will take a look.

Michael on June 05, 2008 at 4:25 pm

Awesome tutorial.. Will definitely work this in somewhere ;)

Prof Kienstra on June 06, 2008 at 5:59 am

@Marie-Claude – Absolutely, <li><a href=”#”><img src=”images/1.gif” alt=”” /></a></li>
Michael on 02 Jun 2008 at 8:17 am
I’ve tried to put some links on my images with href but on IE6 there is a bug, the image with the link was not hidden ….

Lorenzo on June 10, 2008 at 11:03 am

i want the samething but vertical .. for a side menu
i would love to have that … so clean and nicely done.

Cheers

Sultan on June 10, 2008 at 1:53 pm

Any ideas about this bug on IE6, when you create a link <li><a href=”#”><img src=”images/1.gif” alt=”” /></a></li> , the image with the link was not hidden….

Lorenzo on June 10, 2008 at 3:04 pm

@Sultan – It is on the to-do list.

@Lorenzo – I am not seeing that problem in my test http://sandbox.leigeber.com/slidemenu4/slidemenu.html Shoot me an email with a link.

Michael on June 10, 2008 at 3:19 pm

Wow, this is so cool and its also fast loading. THanks

fedmich on June 11, 2008 at 6:06 am

Any possibility to reverse the thinking on this?

Rather than defining the width of the rolled out menu, define the universal width of the collapsed menus? This would allow the according to stretch to the width of the UL or parent or predefined percentage?

John on June 11, 2008 at 11:52 am

@John – If I follow you correctly that would easily be possible although personally I think the logic currently in place has a broader appeal. Shoot me an email if you are looking to work it out and I will be happy to help.

Michael on June 11, 2008 at 12:41 pm

You are very talented. I have a great deal of respect for you for allowing us to share with you. From all the posts I have read, you are very helpful with people who need it. That is another reason for me taking the time t write. Not many tuts give support beyond initial post. I look forward to playing around with this! Thank you very much…

Jonathan on June 12, 2008 at 2:45 pm

http://www.alexeivella.com — This guy used Moo to create his layout. Is there any way to do this without Moo? It’s incredibly intimidating to new designers.

Z on June 15, 2008 at 7:14 pm

@Z – If you are referring to the accordion, I posted a script a few weeks back. Check the archive.

Michael on June 15, 2008 at 7:20 pm

nice, too bad doesn’t de-grade very well :(

michael on June 15, 2008 at 8:21 pm

@michael – How would you have it degrade? Obviously you can set the initial width in % of the sections in your particular instance which would aid some. Thanks.

Michael on June 16, 2008 at 10:34 am

hi michael, is it possible to implement a “snap-back” function? e.g. I use a horizontal accordion in a new project (http://www.martin-franssen.de/de/klienten) as a main menue. It would be nice if the accordion tabs would snap back to the actual menue entry after hover another tab…

bolleone on June 18, 2008 at 8:49 am

@bolleone – That could definitely be done with a little modification. Shoot me an email if you need help.

Michael on June 19, 2008 at 8:08 am

Pretty cool script, exactly what i was looking for.
Tho i have a question: Is it posible to change the width of the remained image? i want to see more of the selected image and less of the other ones…

mp on June 29, 2008 at 9:29 am

ignore what i just asked… -_-
wasnt paying atention

mp on June 29, 2008 at 9:31 am

Well scripted and very useful. Thanks for posting and keeping the knowledge flowing smoothly.

Affordable Web Design on July 01, 2008 at 9:50 pm

cool. :)
but is eventhandlers don’t create memory leaks in IE ?

Alex on July 02, 2008 at 7:23 am

@Alex – I have not run into it while testing nor heard from anyone else. I will hit it again in IE6 when I get a chance to make sure there are no problems. Did you see a problem? Shoot me an email if so.

Michael on July 02, 2008 at 7:59 am

That script is a masterpiece, really.
But there’s a little bug when you have nested lists that you want to behave and display differently.
So here’s a little fix :

replace :
sa=m.getElementsByTagName(‘li’);

with :
for(i=0; i<m.childNodes.length; i++) {
if(m.childNodes[i].nodeType == 1 && m.childNodes[i].nodeName.toLowerCase() == “li”) {
sa.push(m.childNodes[i]);
}
}

Cheers ;-)

Rémy on July 11, 2008 at 3:03 am

Where is the demo???

Sandie Sørensen on July 15, 2008 at 2:36 am

@Sandie – The demos are embedded in the post using iframes.

Michael on July 15, 2008 at 6:31 pm

Is it possible to change the width of the remained image i want to do so

Cool Interesting Facts on July 27, 2008 at 6:50 am

Is there any way to add a dropdown menu to the panels?

Darrin on July 28, 2008 at 11:25 am

Excellent.
But i have one type to you:

parseInt(s.style.width,’10′);

change to:
parseInt(s.style.width);

Because the second argument of parseInt indicate the base for the conversion.
Default is 10.

Nagib on July 28, 2008 at 2:26 pm

I really appreciate the simplicity of this script, the only request/suggestion I would make is the ability to add borders/padding/margins to the actual LI elements, currently if I add border or padding to the LI elements, the last image dissapears (well it actually shifts down but it is invisible due to the dimensions of the .sm object.)

Hector on July 29, 2008 at 3:13 pm

@Cool Interesting Facts – The second variable will control the remaining width.

@Darrin – Sure, if you are handy with JavaScript it could be done… having a hard time envisioning that though.

@Nagib – Thanks for pointing that out, not sure why I would have added that in. I will update the script asap.

@Hector – It can be done, just make sure you adjust the width as you make other adjustments. It can all be handled through the CSS.

Michael on August 03, 2008 at 8:27 am

Hey Michael, Great script. Much lighter than the ‘Image menu’ that I am using currently.
So I can migrate over to this script I would greatly appreciate a little help on the ability for the menu to reopen to the 5th parameter menu item on mouseout. I’ve tried to have a look myself but Javascript is not my thing. Any help would be greatly appreciated… And I can see that many people before me have asked for the same functionality. :-)
Cheers
Pete

Pete on August 04, 2008 at 5:16 am

hi,

I’d like to use this script several times in a same pahe but it dosent work, can someone help me ? thanks

shinchan on August 04, 2008 at 7:05 am

i am using ur Horizontal JavaScript Accordion 1kb….i want to make it in loop.in the script,the lst parameter is 1..it will display the first image….whats the problem is , i want the UL should display first image as default…could u pls help me regardings this…very urgent…..

raghu on August 05, 2008 at 2:58 am

hi,

I’d like to use this script several times in a same page but it doesn’t work, can someone help me ?

thanks !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(‘im trying to include 2 horizontal accordeons from this script in this vertical accordeon : http://www.learningjquery.com/2007/02/more-showing-more-hiding)

shinchan on August 05, 2008 at 5:57 am

I hope I’m not making an idiot of myself but I’ll ask anyway: I’m trying to make a website using your Accordion as the main navigation. Everytime it loads, it shows the first picture. How can I make it show the picture that I’ve clicked on after loading the new site? If that’s to complicated, how can I make it that all pictures are equaly hidden? Thanks very much, you did a great job on that script!

Manuel on August 06, 2008 at 4:56 am

Hi Michael, is there a work round that you know of so a transparent background of a png would work when used within the <li> parameter, i can see you are stacking the elements but its setting the backgrounds of each <li> with a white fill?

Stuart on August 06, 2008 at 5:35 am

Ok, I did make an idiot of myself :-P . You explained nicely at the top but I somehow didn’t see. Thanks anyway and it’s a really awesome script!

Manuel on August 06, 2008 at 6:12 am

Great little menu. Very flexible, I can mix things up and use divs, graphics, links, php calls to create images on the fly etc. all inside the list example. I dissected the mootools version and it just gave me a migraine. This is just what the doctor ordered.

Bill

Bill on August 06, 2008 at 2:01 pm

Got the problem resolved re the returning to the menu on mouse out to the selected (5th parameter)

var slideMenu=function(){
var sp,st,t,m,sa,l,w,gw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName(‘li’);
m.onmouseout=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
l=sa.length; w=m.offsetWidth; gw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=gw+’px’; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){
s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
},
slide:function(s,c){
var cw=parseInt(s.style.width);
if((cw<st && !c) || (cw>gw && c)){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+’px’;
}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+’px’}
if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
s.style.width=(w-owt)+’px’;
}else{clearInterval(m.timer);clearInterval(m.htimer)}
}
};
}();

Pete on August 08, 2008 at 9:04 am

Oh that is not easy to read. Add the following to the 8th line of code.
m.onmouseout=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}

Pete

Pete on August 08, 2008 at 9:05 am

Nice script! IE8 gives performance problems… Do you have any idea why?

Leon on August 12, 2008 at 3:16 pm

@Pete – On the todo (very long list). Will get to it when I can.

@shinchan – It isn’t currently setup to allow multiple instances, also on my todo list.

@raghu – Unless I am misunderstanding you the information you need is in my original post.

@Stuart – I don’t remember setting the background to white… shoot me an email.

@Pete – Thanks for sharing. I will take a look when I can and update the script if suitable.

@Leon – I am not currently supporting IE8. I will take a look if the performance issue remains in beta 2.

Michael on August 12, 2008 at 8:15 pm

My images don’t appear. Is there a problem with my image files?

felix on August 13, 2008 at 2:58 pm

You have done commendable work. I shall be adding it in http://www.downloadjavascripts.com in coming updates. Cheers!!!

Tanve on August 14, 2008 at 5:07 am

Michael, a wonderful script and using it on several pages and using iframes instead of imgs – works great!!! Thanks for sharing! I’m trying to insert a setTimeout() in the script to provide a short delay in the onmouseover before a panel expands, but can figure it out. I’m also playing with onmouseup to force the user to click instead of just roll over. Ideally, it would be nice to do both: control the delay time and allow users to click. Any help would be appreciated.

John on August 15, 2008 at 2:45 pm

hola amigos esta muy bonito lo del acordeon pero lo que necesito es cambiar…ejemplo aumentar mas menus x k yo tengo 5 menus… como agrego mas.. y que al posesionarme en cada uno me lleve a un pop-up
gracias
dolanor_24@hotmail.com

orlando on August 18, 2008 at 7:57 pm

lol….good one. When I first looked at it I was like what so special about this. Looks like normal button. But when I hovered my mouse over it, it suddenly changed my view. Very simple and neat approach.

Minnie
_________________________________
http://www.writingservicescompany.com

Term Papers Writer on August 20, 2008 at 2:33 am

Hello Michael, awesome script!

I ran into the following problem: I have the accordion div nested in another div which has its style set to display:none. The thing is that I need to set display to none as I have a scriptaculous function that makes the element fade in after the page is loaded. Strangely the display:none affects the accordion in FF 3 and IE 6 (they don’t display the accordion), but not in Safari 3 nor Opera 9. What can I do? Do you have a solution to this?

Roman on September 01, 2008 at 8:10 am

EDIT: see this example: <a href=”http://mosik.info/sandbox/example.html”>http://mosik.info/sandbox/example.html</a>

Roman on September 01, 2008 at 5:22 pm

I have developed a “fix” for your wonderful accordion, because it currently “messes up” other LI formatting when another list is embedded on an “accordion panel”. I have altered the line “sa=m.getElementsById(‘li’);” to read “sa=document.getElementsByName(‘HALI’);”… and in the accordion list markup, have added “name=’HALI’” to each LI tag. If you’d like an example, shoot me an email. Oh, I also think it might be nice to offer a version which works with “onclick” instead of “onmouseover”. (a trivial change, but some people will appreciate you providing two versions)

A. Boulley on September 05, 2008 at 10:45 am

Authour shold be admired.
I will suggest to place text instead of image for link…
If you are conscious about SEO.

www.Raaj.com.np on September 13, 2008 at 5:56 pm

Wow, this is awesome.
Thanks

Anoop Kumar on September 14, 2008 at 10:23 am

@A. Boulley

Thansk for your post, but could you provide a live example?

I’ve got the nested unordered lists to work, but I they don’t display any bullet sign, even if i add “list-style-type:disc;” to the respective <ul>.

vaikava on September 15, 2008 at 3:16 pm

Hi,

I have a real problem with this king of “horizontal accordion”! I would like to have free text on the tabs, BUT HTML do not let me( I found something on IE with a Microsoft plug-in – but I need also this accordion to work on others browsers; there is another option to work with SVG images, but… again a plug-in need to be installed in order to be viewed) !
Does anyone have any solution for this?

Thanks in advance!

Cristina on September 16, 2008 at 3:21 am

Hi,
Great work,

Is there any one you can define the widths of the li’s as the css gets overwritten.

cheers!

harry on September 18, 2008 at 5:17 am

thanks for your script.
I’m going to comment it in my blog after a few tests.

Ronald Clark
http://www.saffron-multimedia.com

Ronald Clark on September 21, 2008 at 10:40 pm

Really nice job. I have a working example which i have modified to use more css for the layout of the 3 panels. See
http://65.17.211.151/iop/cb/slidemenu/slidemenu.html
However i need to have the onload elsewhere then the body tag due to the constraints of our CMS. I saw an earlier reference to this problem up the page, but i could not work out how to get this to work. Im not a javascripter at all.
Any help?

Chris b on September 24, 2008 at 2:50 pm

Thanks for your script.
Great work.

Maricusa on September 29, 2008 at 11:14 am

script is working however I want to get this in a table in the middle of the page. I have no idea how to do this. By the css file or html file?? Please help with specifics.

I’ve got the rest working, but just need instructions on how to put in a table centered in the middle of a webpage. Thanks.

Eric on October 01, 2008 at 8:28 pm

Is there any chance this would work with custom width of the “sliding” area?

Nemanja Cosovic on October 02, 2008 at 4:50 pm

Thanks, great article!

SB on October 03, 2008 at 10:22 pm

man u really rock
this is really an awesome effort
i have been looking forward to this for a long time
keep up the good work…

nikhil on October 08, 2008 at 3:35 am

Incredible. This is so lightweight and beautiful. And no frameworks / libraries!

It looks like this is completely customizable too. Just do a little creative CSS modding (just change the .sm li) and a few new images and that’s it. My concern is that should the images go missing, you would see just an empty space. There really should be alt tags with content here, as well as backgrounds for each li.

However, this is an excellent proof of concept and it is just a simple CSS fix to alleviate these issues.

MattZ on October 10, 2008 at 7:19 am

Is there any chance this would work with custom width of the “sliding” area?
Please have a look at my one.
http://blog.guitarbean.com/2008/10/horizontal-accordion.html
Many ideas are from Michael’s, thanks Michael.

govo on October 11, 2008 at 1:18 am

I have read this Blog and you have shared good information about Horizontal JavaScript Accordion 1kb
Nice Post!!!!!!!
Thanks.
<a href=”http://www.cyberthinkinfotech.com/webdevelopment.php”>Web development | Ecommerce solutions </a>

Webmaster | Web Development on October 15, 2008 at 5:32 am

Thanks govo, I’ll check it out asap.

Nemanja Cosovic on October 17, 2008 at 5:18 am

I think this code is great and easy to change.

I am not a programmer so I am wondering if anyone has added an onclick per panel so someone can be directed to another webpage or any suggestions on how this can be coded.

wrens’

Wrens on October 17, 2008 at 10:22 am

thanks for your help i will use this on one of my website…

Wally on October 17, 2008 at 10:37 pm

Hi Nemanja Cosovic .
Did you mean that you need to set the different MAX WIDTH or MIN WIDTH for each element? I thought my script can help.
But I think it we need to try a other new algorithms to make. Because all the elements’ sliding behavior is correlative. One is sliding, other needs to know what’s happening. It is to complicated!

govo on October 18, 2008 at 11:00 am

Govo can you send me an email to ncosovic@gmail.com so we could establish better communication. :)

Its simple, but I need “space” to explain. :)

Nemanja Cosovic on October 19, 2008 at 5:17 am

Is it possible to MODIFY example No.2 to have one box/image/field opened onLoad as the example No.1 has?

I need answer ASAP.

Nemanja Cosovic on October 19, 2008 at 2:23 pm

Stupid question. :) Sorry.

Nemanja Cosovic on October 19, 2008 at 2:25 pm

Is there any possibility to move this onLoad function from body to .js file?

I tried adding this to the end of the JS file
window.onload=slideMenu.build(‘sm’,400,10,10,3);

but I had no luck…

Nemanja Cosovic on October 19, 2008 at 2:27 pm

@Nemanja Cosovic
This works:
<script type=”text/javascript”>
window.onload = function(){
slideMenu.build(‘sm’, 200, 10, 10, 1);
}
</script>

Kees on October 20, 2008 at 4:35 pm

Great script, simple and easy to use. I love it.

One question though, when I add links to the sections of the menu they display horribly in Firefox (it puts the standard blue colour for links around the edges). I know I could change the colour of this using CSS, but I was wondering if there was a way to make the accordion sections links without having Firefox give them a border at all?

Hope that makes sense and thanks for the script.

Andrew on October 22, 2008 at 3:07 pm

Hi, Is it possible to have the picture clickable and hyperlink to other page?

Jack on October 24, 2008 at 3:34 pm

Hi,

I have another script in my page that have [function hideswapcontent() {}]. When I try to use the this accordion it makes my swap content script stop working. Is there a work around on this?

Thanks,
Mike

Mike on October 26, 2008 at 2:31 pm

Hi, is there anyway to allow the slide move from left to right instead of right to left? That would be perfect for my need too.

An Ho on October 28, 2008 at 3:30 pm

If you’re looking for a working example of this, I’m using it on a non-profit website I’m working on for the front page. Slightly modified to fit what I needed it to do of course, but it’s rooted in this very demo.

http://www.berryconsiderate.com

John James Jacoby on November 13, 2008 at 10:32 am

brilliant compact code! thanks so much for sharing it. is there a way to swap the left right coordinates, so that the panels float to the right rather then left… ie flip horizontal. ??

thanks,
adrian

Adrian Wagner on November 17, 2008 at 7:44 pm

it should not have an image as a background , useless.

john carpenter on November 18, 2008 at 2:01 pm

the code is not brilliant, it is full of anacronisms wich makes it very unpleasant to read and looks ugly for a code sintax.

john carpenter on November 18, 2008 at 2:03 pm

I was able to recreate this in dreamweaver but can’t seem to get this into an existing page. it won’t read the code. Can anyone help?

newbie on November 19, 2008 at 1:06 am

This script is simply GREAT.

I read some people comment the code is not great, but it works well. It can always be improved, of course. ;)

Thanks,
Michele.

Michele Beltrame on November 20, 2008 at 3:36 am

sweet and simple. thanks mate.

Amila on November 22, 2008 at 9:57 am

wow it’s soo simple! Thank you!

Ivo Ivanov on November 22, 2008 at 10:34 am

IT IS NOT WORKING FOR ME IN INTERNET EXPLORER. ok in firefox and opera.
Check: http://www.failures.biz
Help me please………..

Charles on November 22, 2008 at 11:00 am

It’s an amazing script, thank’s :)
the administrator of the website : http://www.buvetteetudiants.com

étudiant blogueur de l'école marocaine encg de settat on November 24, 2008 at 4:15 pm

Wow! This is great!!! Thank you!!! So small, so good! It resolves a lot of problems.
Using CSS you can make links on them, remove borders, and everything you want.
PLUS! If you know a lil’ bit javascrip you can make wonders

Ionut on November 28, 2008 at 2:40 pm

Very good tutorial thx.

mobilya on December 14, 2008 at 5:16 am

Hi,

This is a great piece of javascript.

Almost what I was looking for :)

Is it possible to make it flip horizontally (not a coder myself – just dabble in the scripts)?

Henrijs Barsevskis on December 16, 2008 at 12:39 pm

It was good to go through your post. keep up the good work.

Website Design on December 16, 2008 at 9:34 pm

Thank you so much just what i was looking for, perfect!!

Ryan on December 18, 2008 at 10:57 am

it’s a beautiful piece of work and so easy to use! now I’m trying to mix a little bit of opacity into it – full opacity if it’s being shown, 1/10 opacity if it’s hidden. any hints as to where to edit the js? thanks!!

kathe on December 18, 2008 at 5:17 pm

Hi,

This is a great piece of javascript.

3faycom on December 29, 2008 at 12:06 am

Beautiful Script.. i hope my client likes it

Denis on January 07, 2009 at 9:11 am

I really like this, just wondering if you have ever tried to use a different image when each of the panels are collapsed – instead of how you have it with the text on the left of the image.

Kelly on January 12, 2009 at 8:49 pm

Hi,

How I can use this script (1.st script) in the aspx, ( actually in master page)

thx

BInE on January 21, 2009 at 5:38 am

I search Google this script comes first. very nice

Bala, India on January 21, 2009 at 11:18 pm

Hi Mike,
much appreciate not just this but all of your scripts.
Anyway, in this one I’ve tried to shift the onload event from main html file into separate script file and make it work via addLoadEvent() or similar function, but cann’t make it work(probably because of function’s parameters)…is there any possibility to resolve this, for you, minor issue?

Jan on January 26, 2009 at 7:28 am

thanks ,nice script i love it and only 1kb !

Rami on January 26, 2009 at 6:48 pm

Other than a wicked genius, you’re also a Great person.
Thank you Michael and greetz from Italy :D

Andrea on January 28, 2009 at 11:28 am

hi, i love this one. this inspirated me to do it on my own now. to see how long will it take for myself….

Nils on January 29, 2009 at 7:31 am

It doesn’t work in Safari 3

levski on January 31, 2009 at 11:43 am

I’m using this slide panel and it is working perfectly in all browsers except IE. The problem is this. If I just put images in the slide panels, it works perfectly, but my client wants to have a contest form in the first panel. I have done that, but in IE, the other panels float behind the form. You can view the initial look at the following address.

http://andersoncarpetandhome.com/testSite/index.php

Thanks for any light you can shed on this.

Mark Dodgson on February 06, 2009 at 8:33 am

I had downloaded the

Horizontal JavaScript Accordion 1kb
but it is not working in firefox

Saravana Kumaran.T on February 07, 2009 at 1:09 am

Hiya – great script – many thanks. I’ve downloaded it and tweaked so it fits the size I need etc. Great so far!

As I’m completely new to javascript I have a question: How would I go about creating rollover buttons elsewhere on the same webpage (just in a different DIV) that would each also trigger the slide or movement of a specific image within the accordian?? Does that make sense?

Thanks again
Stef

Stef on February 11, 2009 at 4:47 pm

Amazing – awesome work. Thank you for making it available for open use. Your are a legend!

Sam Allen on February 12, 2009 at 6:03 am

thank you for the great script …
but the script that collapses onmouseout doesnt work probably when the page opens it selected the first layer automatically , not like the demo above ..
am i wrong ?!

Rami on February 13, 2009 at 12:42 pm

Hi, shot for the script. it’s great. Just a question, if I want to make the right hand side (4) rounded like one how would I go about doing that?

I tried to see if it was in any of the other comments, just scanned through so sorry If it’s been asked.

Nev on February 16, 2009 at 3:50 am

Please i want to make the same menu in vertical position but.
Can you help me ??

olivier on February 16, 2009 at 3:52 am

It’s been asked numerous times and the reply has always been “sure, no problem, seems easy enough, I’ll get it done soon” but so far, nothing has been implemented :(
The collapse-back-to-initially-activated-tab.
This is the only thing that is missing in turning the script into a kick-ass navigational menu.
I know some JS, but one-letter-variables and functions fry my brain :)
Any pointers?

mores on February 19, 2009 at 7:22 am

Just a quickie – is there any way to fire the slide script to automatically scroll through opening and closing the sections that you may have built but didnt show on this example page?

Sam Allen on February 19, 2009 at 7:48 am

could you explain a bit about how to customize this for use with different images of different dimensions? thanks.

nathan on February 28, 2009 at 11:39 pm

wow…amazing effect. Can’t wait to try it.

Thanks man!

bluedee on March 03, 2009 at 1:33 am

This is an amazing piece of JavaScript script code for a horizontal accordion; I always had wanted to have an horizontal accordion, but haven’t had the inititiave until now to have a crack at it. It has been working for me well, but I haven’t been able to implement it correctly for my web design class at Michigan State University; Attempting to do a liquid page design, I need to have everything in percentage, but I’ve faltered on how to modify the JavaScript accordion to extent on % as it is currently based on pixels. Would it be possible you explain if idle time comes across on how can that be done?

Kevin on March 09, 2009 at 8:22 am

This slide is a best work. I have a dude. How can I do to not display the scroll/slide the first time the slide appear? Thanks

jose cristobal on March 13, 2009 at 1:19 am

anyone know why this is buggy (non-uniform image placement distribution) when you add many (20+) items to the list?

RS on March 18, 2009 at 7:58 pm

This script is very nice. I will use it in my website..Thanks

sonal on March 21, 2009 at 3:45 am

Wondering if it’s possible to do without the lists, <ul>, <li>.

This is because when I’m using Accordion with cssGlobe’s EasySlider, the latter recognizes the Accordion lists as additional empty slides thus spoiling an otherwise excellent combination.

Thanks in advance.

Partha Bhattacharya on March 22, 2009 at 10:57 am

Your script is brilliant!

I’m a designer and plan on using this to display work as a sort of a layered portfolio “appetizer”.

One thing I really wish the original script actually didn’t do is the “wind up” it does upon loading the page (at least on FF and Safari on OSX). The motion tends to stagger if there’s a lot of content to load on the page. Can it be adjusted so it’s already in position and nothing’s moving upon load?

Thank you!

BB on March 24, 2009 at 1:51 am

Thanks for sharing the link but looking at the script it is 2.5kb and that is just for the extension to the <a href=”http://www.fixresimler.com” title=”resım”>resimler</a> mootools framework (36kb). Definitely something to look into if you are currently using the mootools framework though.

jessica on March 25, 2009 at 1:57 pm

Just a quickie – is there any way to fire the slide script to automatically scroll through opening and closing the sections that you may have built but didnt show on this example page?

resimler on March 25, 2009 at 1:58 pm

@jessica – This script is not built on mootools and it looks to be 1KB to me.

Jim on March 25, 2009 at 2:06 pm

hi there… thanks for this nice script… but i get an error and i don’t know how to solve it… can you have a look please?

uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)
[Break on this error] if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}

menu.js – line 11
the website is http://www.slimhouse.ro

thanks a lot!

xcuseme on April 01, 2009 at 2:59 am

Great little script. We’ll use it on a project we are working on.
F.

NYWebTeam on April 03, 2009 at 9:23 pm

前来支持下！！

upwind on April 07, 2009 at 10:46 pm

Hi love the script. i have add a .swf to a div tag and have found in firefox when the accordion is closed at the .swf page the .swf sits outside the accordion. when the tab is open the .swf jumps back into position. what do i need to add to keep the .swf inside the accordion. works fine in ie and safari.

Natalie on April 14, 2009 at 5:09 am

that’s a great work !
But I find some problems to call it on the last WordPress 2.7

Thank you

Djerba on April 24, 2009 at 2:56 am

Hi,

did you fix this script for working two same copy of this funcionality on one page? I email you few months ago, but don’t recive your answer.

rzmota on April 27, 2009 at 8:57 am

I have used this script on my home pages and added another tiny script to enable rollovers in the menu. cant thank you enough as the other script i tried made me tear my hair out.

nosher on May 03, 2009 at 3:06 pm

I have ever tried to set up “imagemenu”on mootools. but i falied to make it work. Your stuff will hofefully be workable. thanks anyway. I gonna question you if i do have any problme. chao

freeman on May 13, 2009 at 12:15 am

thanx perfect js code man :)

seo on May 19, 2009 at 2:55 am

is there anyway to add caption for each image that pops up? underneath preferrably – i really like this, but would love to have captions under my images. thanks!

steve on May 19, 2009 at 4:51 pm

Hi.
I have a quick question:
Is it possible to avoid any movement on page load. If for example, i select menu item 1 to be open on load – the page loads as though none are open then animates to that menu item. Hope that makes sense!
Cheers, good work

Gareth on May 21, 2009 at 10:55 pm

I love this little accordion and am trying to implement on a page with a handful of SWF’s. As soon as I insert the SWF, however (using Dreamweaver CS4 and all its attached javascripting) it kills the accordion function. The CSS is unaffected, but the motion is gone, just as if the .js file had been removed. Any ideas?

Ted Hawkes on May 22, 2009 at 4:24 pm

rzmota, re the multiple instances. I have found a way to do this. email me at nosher@worldofnosh.com and i’ll send you the files.

nosher on May 26, 2009 at 3:09 pm

actually, go to my home pages at http://www.worldofnosh.com and head for the information page where i have added a link to the example.

nosher on May 26, 2009 at 3:12 pm

Hi! Thanks for the tip. Its amazing

Lalo on June 11, 2009 at 4:39 pm

Can anyone help me witch customization this menu to vertical sliding menu.
Sorry for my English-language. THX.

vojta on June 12, 2009 at 6:43 am

Is there any chance to make this menu stretch to 100% ? Thanks in advance!

roboflexx on June 21, 2009 at 9:13 am

If your Design BLOWS on Safari but works in FIREFOX, then make sure to kick out the browser-universal attributes * argin 0 padding 0. If you included them in your own CSS or HTML its enough to have them in ONE place!

I have simply merged my CSS with his CSS and everything is fine.

Thanks again, Natalie

Natalie on June 25, 2009 at 12:54 pm

naprawdę świetny skrypt. prosty w użyciu lekki i nieskomplikowany polecam

ookris on June 27, 2009 at 8:16 am

Hey there, I just wanted to say THANKYOU SO MUCH! This is excellent.
I have been searching the net for almost a month trying to find a quick and effective way of doing this! and you've done it! Well done! The implementation is simplistic and I am certainly booking marking your site for future reference! Thanks again for making this publicly accessible.

Natalie Crowe on June 28, 2009 at 6:06 am

hey man, anyone know how to adjust the 'compress' size of the images either side of the mouseover?? cheers

jon on July 02, 2009 at 6:20 pm

Nice.
But why re-invent something that does already exist (as really more flexible plugins) in the Web 2.0 frameworks such as Prototype, MooTools, jQuery or EXT ?

Avery on July 16, 2009 at 3:42 am

This is a terrific menu, I'm trying to implement it to a new project site that I'm working on, I have 7 slides and the menu is just too large right now, how can I control how much of each slide is showing before you rollover the menu with your mouse? Please respond ASAP the deadline is upon us!!

Alan on July 28, 2009 at 8:42 am

hello!!! congratularions for your work, my question is if have you done a vertical version that works this well?
Tank You.
Mario

Mario on August 04, 2009 at 4:29 pm

I'm using the hyperlink example you've demonstrated above, http://sandbox.leigeber.com/slidemenu4/slidemenu.html however, I have listed the items as you have here in an iframe.

I'm having difficulties getting the links to work within an iframe.
If I load the pages individually, everything works fine. however, in the iframe the links no longer work.

In particular, I've trying to use the thickbox (http://jquery.com/demo/thickbox/) affect. But because I have the accordian within the iframe, the thick box isn't working. However, I am finding the links don't even work with just the basic href code working. any suggestions.

http://ourtownfencing.businesscatalyst.com/_product_45033/Flat_Top_Deco_Fencing

ignore the poor quality images.

I'm refering to the first accordian.

Any assistance would be great.

Natalie Crowe on August 08, 2009 at 7:17 pm

Hey there,
Nat here, my apologies. My own code error. your product works perfectly. So sorry for any inconvenience.

Thanks again
Nat

Natalie Crowe on August 09, 2009 at 4:28 pm

After reading through all the comments i don't believe this has been asked before.
I'm a bit of a newb when it comes to js, and i was wondering if it were possible to implement a way to make the accordion cycle through all the tabs automatically.
Lets say it selects the 1st tab, then (n) seconds later it selects the 2nd etc.
I'm asking this because i would like to use it for a product showcase and all the scripts that are out there are about 35-40k.

ps. You rock :)

RonnieW on September 22, 2009 at 7:08 am

Hi everyone,

Great job!
I am using this script in my Iweb site. When publishing on my hard disc no problème but once published on my web site no way to see the menu.
I have inserted it in an iFrame.
What seems to me strange is the fact that when launched directly from the url
http://florentworld.kinssha.org/slidemenu.html
it works perfectly.
Is there any problem when inside an iFrame?
Thank you for your answer and pleanse carry on your great job.

Florent on September 27, 2009 at 1:30 am

Sorry my mistake everything is working fine!
Thanks a lot.

Florent on September 27, 2009 at 2:31 am

I just want to say thank you.

I like simple in my life also in my work and web projects, and you just helped me with a simple code to complete the accordion menu!

Thank you very much again. God Bless You!

Omar on October 01, 2009 at 5:55 am

Thanks a lot for that one. Been trying to do it myself but i confess i failed!… Thanks for sharing.

Kai on October 07, 2009 at 2:08 pm

Thank you! Finally found one that works and is easy to implement.

David on October 20, 2009 at 12:17 am

needed informations.. thank you very much..

ersin on October 25, 2009 at 5:38 pm

your script is absolutley wonderfull.Simple,light,and dynamic….thank you for this code

arty on October 30, 2009 at 3:23 am

Hi Michael,
It is really a great article…
I tried it on a simple HTML file, it worked good..
But when I am trying it on ASPX page, it gives me an error: "Too many characters in character literal"…

Can you tell me what is the problem?

Himanshu on November 13, 2009 at 4:22 am

Can this be used in WordPress too?

SEO Essen on November 26, 2009 at 3:12 am

Hi Maicahel,
love your script, and it used to work on my site. Can you perhaps have a look on this page:
http://www.dtails.com/, because now, for some reason, it only shows five out of eight pictures on the menu. I have been trying to figure out what has gone wrong, but I am mystified. Thanx :-) !

Jens on December 02, 2009 at 7:26 am

Hi!
I'm trying to use your script… It's working almost perfect…

The only thing is the following… in IE I get this Error or Warning:
'style' is null or not an object
slidemenu.js
Code:0
Line: 18
Char: 4

I hope you can explain me some way to fix it…

Thanks a lot!

Damian on December 09, 2009 at 2:56 pm

Love this script just wondering is there anyway to keep the choosen tab open when selected and show that you are on the page with that tab still open ie the tab you selected….

JonnybGood on December 14, 2009 at 4:11 pm

hi very nice script, can u make this vertical.??

shyju on December 19, 2009 at 2:11 am

Hi, i was wondering if you can fix a problem with this script if you onmouseout to quickly it will not go back to the original width it stucks at a point …. see it in action: http://www.mensmentisgroup.ro
please help me on this one :D
btw: it's a very helpful script

Iuhas Daniel on December 22, 2009 at 7:45 am

Thanks, can we use with wordpress?

toplu mesaj on February 09, 2010 at 2:47 am

Hi,
thanks for script, but i have problem with body onload.
How replace <body onload="slideMenu.build('sm',450,10,10,1)"> to <body>
I tried but it does not work
<script type=”text/javascript”>
window.onload = function(){
slideMenu.build('sm', 450, 10, 10, 1);
}
</script>
Please help me.

tym on February 24, 2010 at 11:54 am

thank you soooo much this script wrote with intelligence i tried to download same script but it was so difficult to change it and much more coding but this one soo fine and good working too thanks …

soo, can i make it open to one image as default and than make it move with mouse over ??

waiting for you help .. again thank you ..

nader on March 02, 2010 at 3:58 pm

Hi,

I'm having a few problems with compatibility with ie8 after changing the size of the images to 500×400. The script works with google chrome with no problems at all. please can someone inform me of how maybe i can rectify this problem. In my eyes i havent changed anything other than the image size… many thanks. Andy

Andy on March 09, 2010 at 9:39 am

Just wanted to drop in and say thank you for all your hard work. I took a copy of your earlier script and made it compatible with WordPress as a featured article slider for my clients.

I also got it to show the post title vertically with just css, but the vertical txt doesnt work in Opera or Flock.

You can check out what I have done: http://sliderz.convertpsdtowordpress.com/

I think I may be converting some more of your scripts over to WP. Keep up the great work.

PSD to WordPress on March 22, 2010 at 9:27 pm

dude, very cool stuff. i have been looking for something like this. thanks for the clear explanation. cheers.

e. fairfax vere on March 29, 2010 at 8:30 pm

Thanks, this is a great simple script. I tried to add mouse roll over effects to it using the following script that I got from another site. The image changes for the first mouse roll over, but does not change when it moves out. Any suggestions?

<li><A href="../../index.html" onMouseOver="rollover('home')" onMouseOut="rollover('home')"><img src="images/1.png" name="home" alt="index.html" border="no"/></A><SCRIPT TYPE="text/javascript"> setrollover("images/1_dwn.png");</script></li>

<!–
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//–>

Nair on April 01, 2010 at 2:55 pm

Hi there… I want to embed this into joomla template, though I don't know how. Help please =)?

Thanks
Regards
Jake

Jaka on April 05, 2010 at 6:44 am

Thanks so much for the excellent script! Very clear, easy to use and worked like a charm :)

Kirsty on April 06, 2010 at 3:38 am

Thanks for the script. Please how can i change the extent of the slide? I mean the slide is not drawing to the extent i want i to.I'll appreciate any help from u. Thanks.

Gbenga on April 09, 2010 at 11:55 am

First, TERRIFIC script! It's working perfectly.

Say, would you know how I could incorporate text in one of the tabs? In other words, have an image on the left-side, then text to the right side, of each tab? I've tried placing the text inside the <li> </li>, and it's just not showing up.

Thanks again, and I look forward to reading your response soon.

Eric

P.S. I discovered how to run multiple accordions on one page — use iframes.

Eric on April 10, 2010 at 8:43 am

Hello David, I might have a similar small project for you if you're interested. Probably too easy for you, im just stuck on something. Contact me.

Steven on April 21, 2010 at 12:18 pm

thank u so much.. is just what i was needing.. thank u thank u thank u!!!

Patricia Quintanilla on April 26, 2010 at 2:50 pm

this saved my ass.
thanks man, you should put a donate button somewhere, I'd like to invite you a coffee.

depointless on April 28, 2010 at 10:11 pm

Good script !!

The best design on May 03, 2010 at 5:34 am

Just great! Thanks!

FunnySite on May 03, 2010 at 5:34 am

How can I have three accordions on the same page?

elisa on May 04, 2010 at 7:20 am

Hello,
I need your help.
I like your script and this idea of dynamic menu, but I would like to create more sub menu like on the website http://www.wisibility.com while keeping your script, you can help me, please

Valentin3182 on May 05, 2010 at 11:57 am

Hello. First of all excuse me because i can't speak english properly. Second: greetings for your accordion.

Is it possible to make the accordion go back to its loading position when rolled out?
I mean: If I click at the first option of the menu I've made that that's the item displayed, and when I rollover the other items they expand and collapse, but when I rollout the menu the first option (in this example) is not displayed. So how can I make that the option displayed when I rollout is the option displayed at the begginning when the accordion is loaded????

I hope you can understand my question. Thanks

Deiviz on May 11, 2010 at 5:03 am

Very cool javascript, short and sweet. One question: The fifth and optional parameter that sets which accordian is open on page load doesn't work. Looking at the js file the value is set to 'h' but 'h' is then not used at all within the code?
I really would like this function, is some of the code missing.

Ghandi on May 13, 2010 at 12:58 pm

Hello i want the code which appears like 2nd demo at top. How can i do that?
Plz give me suggestions

viki on May 30, 2010 at 4:54 am

Really So Greart job .

Website Design on June 14, 2010 at 5:01 am

Thanks really nice.

One issue with all versions of my friend IE though: When I enlarge this (say images w400, h600), the animation becomes flashy, choppy (the vertical sides of the moving parts). Do you have any idea of how that could be solved. Ofcourse this is IE-only, works fine in all other browsers.

Mario on June 23, 2010 at 4:50 am

MICHAEL IS MY MASTER NOW

Michael, you´re saved my life.

Sandman on June 30, 2010 at 3:46 pm

Hi,

I´m using YSlow and shows:
s is undefined
var cw=parseInt(s.style.width); error on line 18 slidemenu.js
Is this a bug?

Alexandre on June 30, 2010 at 6:49 pm

its so cool… i have been searching it 4 so long. thnks

Sid on July 04, 2010 at 5:12 am

Thanks for sharing, simple, practical, usefull!

Thiago on July 04, 2010 at 9:40 am

Hey dude ur going in a right way this will help us but also this Url you like very mch
do u have this kind of emaples as well

Sweety on July 05, 2010 at 3:09 am

Hey dude ur going in a right way this will help us but also check this Url "http://eyedraw.eu/" you like very mch do u have this kind of emaples as well.
You have shared good information about Horizontal JavaScript Accordion 1kb
Nice Post!!!!!!!
Thanks.

Sweety on July 05, 2010 at 3:11 am

hello! my friend!,
you really helped me in a very crucial time for my project.
thank a lot, lot, lot …..
_info9srinivas

info9srinivas on July 11, 2010 at 11:16 am

great Inspiration……………

prem on July 16, 2010 at 3:14 am

thanks…………..
leigeber.com/

prem on July 16, 2010 at 3:24 am

Thanks for Download "Horizontal JavaScript Accordion 1kb" here is the best example of Horozontal and vertical Accordian :)
http://www.raghibsuleman.com/jquery-common-accordion-horizontal-vertical

Raghib suleman on July 17, 2010 at 11:05 am

Nice work! Thanks!!!

Ed Bickford on July 20, 2010 at 11:59 pm

Nice code. Its really simple. Thanx a lot.

Mohammad Sherif on July 27, 2010 at 4:06 am

Thanks so much for this script – it's exactly what I needed!

How can I insert some text into these panels as they open? I know I can make text be part of the .gif image, but I'd like to figure a way to make a <div> that sits on top of these gifs and displays content when they are opened. This way I can update the content as needed. Or better yet, have the div contain an iframe that could be populated externally?

I'm sure there is some CSS involving a z-index or something, I just can't figure it out in the time needed for my project!

Maureen on July 27, 2010 at 12:42 pm

Never mind – I got it. For anyone who is interested, set up your <li> tags like this:

<li><div style="background-color:#59859A; height:350px"><img src="images/6.gif" alt="" align="left" /><iframe src="testpage.htm"></iframe></div></li>

Style the div so the background color and the height matches that of the gif. Then just make the gif only as wide as the part that shows when the accordion is closed.

Maureen on July 27, 2010 at 1:02 pm

I search Google this script comes first. very nice

suraj on July 30, 2010 at 11:04 pm

very nice plugin. I love jquery. thanks for this post.

FireRoxy on August 05, 2010 at 12:48 am

nice

Santosh kumar on August 06, 2010 at 9:52 pm

cool navigation-menus
thanks!You made some good points there.
<a href="http://www.xn--12c1bcr4c5bwcm5j8c.com//">seo</a>

seo on August 07, 2010 at 8:35 am

It works on my blog, http://myelectronickit.com
Many thanks for this great tips!!

I have also installed vertical accordion menu, I'll guide you (readers) to install it on yours.

Mufid on August 07, 2010 at 11:48 am

very nice script… I love it!!!

Murcia webdesign on August 12, 2010 at 3:47 pm

Great blog! Thanks for sharing this as this will come in useful.

Web Design Norwich on August 14, 2010 at 9:39 am

share admin thanks a lot for sharring a very successful and wonderful

hali yikama on August 21, 2010 at 5:46 am

Sometimes we have to reinvent things which are already existing to do things easier and less complicated. Great job Sir!

santa barbara web design on August 22, 2010 at 2:45 am

Wow! Compact script at 1KB, and love how you have made two versions both with added benefits, Thanks. LT

Lisa on August 27, 2010 at 3:59 am

Trackbacks

Comments are closed at this time.