Horizontal JavaScript Accordion 1kb

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

Pingback: Acordeón horizontal en Javascript de solo 1kb | aNieto2K
http://www.carlosleopoldo.com carlos leopoldo

wow only 1kb, it’s amazing. well done
http://www.thesecondpress.com/blog/ Yonghwee

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

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!
Pingback: Fatih Hayrioğlu'nun not defteri » 26 Mayıs 2008 web’den seçme haberler » düzenlenmiş, Bağlantı, arasında, farklılıklar, kutuları, hazırlamak, jQuery, yapılmış, güzel, aralığı
http://techzen.wordpress.com techzen

Simply amazing!! Really cool. Thanks for sharing it.
muhammad

Excellent work, for a tiny weeny script…. Thanks for sharing.
http://realazy.org/blog realazy

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
Tom

Have you done a vertical version that works this well and is as small?
http://www.leigeber.com Michael

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.
http://www.leigeber.com Michael

@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.
Grundic

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

@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.
Marc

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
http://www.leigeber.com Michael

@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.
Pingback: Free Web Resources - Web Resources Depot
Pingback: Menu en accordéon horizontal et glissant en 1kb !
Pingback: 1KB’lik akordiyon Menu « basarozcan
Pingback: Horizontal JavaScript Accordion
http://www.snapshark.co.uk Jake

Nice, is this a kind of stream-lined version of Mootools Slider?
http://www.leigeber.com Michael

@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.
http://www.ryanroberts.co.uk Ryan

This is nice but it doesn’t degrade very well, I just get two buttons with JS disabled.
http://www.leigeber.com Michael

@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.
http://ayoze.linuxlover.org/blog Ayoze

Yep, working fine on Konqueror!

Great Job!
Pingback: Free Tools, Le meilleur des outils gratuits pour webmaster» Blog Archive » Menu accordéon horizontal javascript (1ko)
Pingback: Menu tipo acordeon horizontal con JavaScript, sin Frameworks | Seraphinux
Pingback: CSSMagazine » Blog Archive » “Accordion” in Javascript
Pingback: AOWS » Captcha al estilo iPhone
Pingback: Laserolame : X-OR’s Blog » Code Développement » 1kb Image Menu
Pingback: » Menú en forma de acordeón con Javascript de 1kb | Informática Práctica |
Travis

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.
http://www.sirviejo.com.ar Sirviejo

I give you a digg! thanks for your script. I’m going to comment it in my blog after a few tests. Good Bye!
Pingback: Katod’un Seyir Defteri - 27.05.2008 at katodivaihe
http://www.ivesmozart.com Ives

Awesome work! I will put a link in my site
http://www.leigeber.com Michael

@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.
Chris

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.
http://www.leigeber.com Michael

@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.
Pingback: RobertoBaca.net » Efecto de acordeón en javascript
Pingback: Accordion Horizontal em JavaScript com apenas 1kb » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards
Mr Web 2.0

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 ?
http://blog.gustavoribeiro.net Gustavo Ribeiro

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

thanks
http://lazytodo.free.fr ravaza

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 ?
http://www.leigeber.com Michael

@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.
http://www.leigeber.com Michael

@ravaza – It has been requested a few times so I will have that functionality added in today or tomorrow.
Pingback: Horizontal Javascript Accordion Menu! - Opensource, Free and Useful Online Resources for Designers and Developers
daveyp

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.
http://www.leigeber.com Michael

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

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>
http://www.leigeber.com Michael

@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.
Pingback: Menu acordeon hecho en Javascript y de 1kb | Data2max.com
Pingback: Modificando el SlideMenu Horizontal | Cmacias.com
http://batailley.net Laurent

Nice scripts there…And yes! It’s possible to do cool things in js without using a full featured 100Ko Framework keep it up!
Pingback: Menú acordeón para los que no entienden de programación
Pingback: This Month’s Best: May 2008 - Six Revisions
http://lazytodo.free.fr ravaza

Do you still expect to add the function I request or did you change your mind ? (sorry to ask again)
http://www.leigeber.com Michael

@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.
Pingback: Weekly linkage madness - elisa.nobe.blog
http://www.dsrdesigns.com Rob

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?
http://www.leigeber.com Michael

@Rob – Not 100% sure what to envision by links under the individual sections. Shoot me an email and we will get it worked out.
Pingback: Websites you shouldn’t have missed in May 2008
http://www.dasautopfand.de Peter

Really nice looking and so smooth Good Job!
http://www.guerout.com Marie-Claude

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
Pingback: アコーディオン型メニューを作成するJavaScript
Pingback: Best Design Articles from May 2008
http://www.leigeber.com Michael

@Marie-Claude – Absolutely, <li><a href=”#”><img src=”images/1.gif” alt=”" /></a></li>
Pingback: » links for 2008-05-27 | Paul Cowles
Pingback: Horizontal JavaScrip SlideMenu | ShekLOG
Adam

Hi
Is there a way to get the animation to reset if the cursor is moved away?
Thanks
http://www.leigeber.com Michael

@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.
Pingback: JavaScript Accordion - 1kb - im Designpicks Blog
Adam

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?
http://www.leigeber.com Michael

@Adam, shoot me an email with the link and I will take a look.
Pingback: NETTUTS - Web development tutorials and links - Best of the Web - May
http://www.thegenepool.nl/profkienstra Prof Kienstra

Awesome tutorial.. Will definitely work this in somewhere
Pingback: diarioTHC | Menú horizontal efecto acordeón
Pingback: Leigeber: Web Development Blog | CNET.ro
Pingback: Surf Raporu 07 Haziran 2008 | Taylan Aktepe
Pingback: CSS Dev Kit » » Best of the Web - May
Lorenzo

@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 ….
Sultan

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

Cheers
Lorenzo

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….
http://www.leigeber.com Michael

@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.
Pingback: Sliding Menu Script | Web Tool OnLine
http://fedmich.com fedmich

Wow, this is so cool and its also fast loading. THanks
http://www.johnjamesjacoby.com John

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?
http://www.leigeber.com Michael

@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.
Pingback: Menú acordeón en javascript
http://www.rockband-pedal.com Jonathan

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…
Z

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.
http://www.leigeber.com Michael

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

nice, too bad doesn’t de-grade very well
http://www.leigeber.com Michael

@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.
bolleone

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…
http://www.leigeber.com Michael

@bolleone – That could definitely be done with a little modification. Shoot me an email if you need help.
Pingback: Accordion Scripts | WebTecker the latest Web Trends, Resources and News.
mp

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

ignore what i just asked… -_-
wasnt paying atention
Pingback: Con mis movidas… y mis lios » Menú horizontal efecto acordeón
Pingback: Great Accordion Scripts | Ajaxonomy
http://www.alfredfox.com Affordable Web Design

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

cool.
but is eventhandlers don’t create memory leaks in IE ?
http://www.leigeber.com Michael

@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.
Rémy

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
Pingback: DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog
http://www.leigeber.com Michael

@Sandie – The demos are embedded in the post using iframes.
Pingback: www.marwebdesign.net » Blog Archive » “Concertina menu”
Pingback: i.ndustrio.us » links for 2008-07-23
http://cool-interesting-facts.blogspot.com/ Cool Interesting Facts

Is it possible to change the width of the remained image i want to do so
http://immedia3.com Darrin

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

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.
Hector

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.)
http://www.leigeber.com Michael

@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.
Pete

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
shinchan

hi,

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

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…..
shinchan

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)
Manuel

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!
Stuart

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?
Manuel

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

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
http://www.afos.net Pete

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)}
}
};
}();
http://www.afos.net Pete

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
Leon

Nice script! IE8 gives performance problems… Do you have any idea why?
http://www.leigeber.com Michael

@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.
felix

My images don’t appear. Is there a problem with my image files?
http://www.downloadjavascripts.com/ Tanve

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

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.
http://www.dantegodeau.com orlando

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
http://www.writingservicescompany.com Term Papers Writer

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
Pingback: Mateus Souza » Arquivos do Blog » Alguns Scripts em Java
Roman

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

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

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)
Pingback: links for 2008-09-12 - iKeif - tech and social media geek, mootools fan, and a ton of links - iKeif - tech and social media geek, mootools fan, and a ton of links
http://www.raaj.com.np www.Raaj.com.np

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

@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>.
Cristina

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!
Pingback: renkli teneke » Resimli Horizontal JavaScript Menu
harry

Hi,
Great work,

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

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

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

Ronald Clark
http://www.saffron-multimedia.com
http://65.17.211.151/iop/cb/slidemenu/slidemenu.html Chris b

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?
Eric

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.
http://www.plumts.com Nemanja Cosovic

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

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…
http://www.mattz-design.com MattZ

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.
http://blog.guitarbean.com govo

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.
http://www.cyberthinkinfotech.com/ Webmaster | Web Development

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>
Wrens

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’
http://blog.guitarbean.com govo

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!
http://www.plumts.com Nemanja Cosovic

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.
http://www.plumts.com Nemanja Cosovic

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.
http://www.plumts.com Nemanja Cosovic

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…
Kees

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

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.
Jack

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

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
http://www.aportfolio.net An Ho

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.
Pingback: Websites you shouldn’t have missed in May 2008 | Noupe
http://www.johnjamesjacoby.com John James Jacoby

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
Pingback: Blog.Skynapse » Javascript Accordians
http://i9design.com Adrian Wagner

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
john carpenter

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

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

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?
http://www.cattlegrid.info/ Michele Beltrame

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.
http://www.failures.biz Charles

IT IS NOT WORKING FOR ME IN INTERNET EXPLORER. ok in firefox and opera.
Check: http://www.failures.biz
Help me please………..
http://www.buvetteetudiants.com étudiant blogueur de l’école marocaine encg de settat

It’s an amazing script, thank’s
the administrator of the website : http://www.buvetteetudiants.com
Pingback: Horizontal Javascript Accordion Menu! | Greep It
Pingback: Gabi’s Toolbox » Blog Archive » Javascript Horizontal Accordion
http://www.filme-bune.com Ionut

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
http://www.wsipelnajums.lv Henrijs Barsevskis

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)?
http://www.businessprodsigns.wordpress.com Website Design

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

Thank you so much just what i was looking for, perfect!!
http://picadesign.com kathe

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!!
Pingback: SITE HORIZONTAL COM JAVASCRIPT | NET PORTAIS
http://www.3fay.com 3faycom

Hi,

This is a great piece of javascript.
Denis

Beautiful Script.. i hope my client likes it
Kelly

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.
BInE

Hi,

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

thx
Bala, India

I search Google this script comes first. very nice
http://www.janchalupsky.com Jan

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?
Rami

thanks ,nice script i love it and only 1kb !
http://www.uluru.it Andrea

Other than a wicked genius, you’re also a Great person.
Thank you Michael and greetz from Italy
http://www.aduco-berufsbekleidung.de Nils

hi, i love this one. this inspirated me to do it on my own now. to see how long will it take for myself….
http://simsadvertising.com Mark Dodgson

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.
Saravana Kumaran.T

I had downloaded the

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

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
http://defunc.com Sam Allen

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

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 ?!
Nev

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.
olivier

Please i want to make the same menu in vertical position but.
Can you help me ??
http://www.mores.cc mores

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?
http://defunc.com Sam Allen

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?
http://nathankautz.com nathan

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

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

Thanks man!
http://TBD Kevin

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?
http://www.daclub.es jose cristobal

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
RS

anyone know why this is buggy (non-uniform image placement distribution) when you add many (20+) items to the list?
http://www.2webvideo.com Partha Bhattacharya

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.
BB

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!
jessica

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.
http://www.fixresimler.com resimler

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?
Jim

@jessica – This script is not built on mootools and it looks to be 1KB to me.
Pingback: Web Projeleriniz İçin 10 Akordiyon Menü - Miraç Baran Satıç’ın Günlük Blogu
http://www.ichirica.ro xcuseme

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!
Pingback: Menu acordeón en javascript de tan solo 1kb at Blog Borchani Studios
http://www.nywebteam.com NYWebTeam

Great little script. We’ll use it on a project we are working on.
F.
http://www.thewebmistress.co.nz Natalie

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.
http://jerba.be Djerba

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

Thank you
rzmota

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.
http://www.worldofnosh.com nosher

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.
freeman

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
steve

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!
http://www.garetho.com Gareth

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
http://www.katyimageworks.com Ted Hawkes

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?
http://www.worldofnosh.com nosher

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.
http://www.worldofnosh.com nosher

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.
vojta

Can anyone help me witch customization this menu to vertical sliding menu.
Sorry for my English-language. THX.
Pingback: 30 Javascript Menu Plugins and Scripts « Dogfeeds——IT Telescope
roboflexx

Is there any chance to make this menu stretch to 100% ? Thanks in advance!
Pingback: 10 Awesome free accordion scripts and tutorials « Paul Rostorp’s Blog
Pingback: Voilá, mein erster Slider-Nachbau :) | team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community
Natalie

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
http://psptheme.org ookris

naprawdę świetny skrypt. prosty w użyciu lekki i nieskomplikowany polecam
http://www.nataliecrowedesigns.com Natalie Crowe

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.
jon

hey man, anyone know how to adjust the 'compress' size of the images either side of the mouseover?? cheers
http://www.brassballvalve.com.cn Avery

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 ?
http://www.easternct.edu Alan

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!!
Mario

hello!!! congratularions for your work, my question is if have you done a vertical version that works this well?
Tank You.
Mario
http://www.nataliecrowedesigns.com Natalie Crowe

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.
http://www.nataliecrowedesigns.com Natalie Crowe

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

Thanks again
Nat
http://www.RonnieW.net RonnieW

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
http://florentworld.kinssha.org/Accueil.html Florent

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.
http://florentworld.kinssha.org/Accueil.html Florent

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

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!
Kai

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

Thank you! Finally found one that works and is easy to implement.
http://www.ersinozdemir.com ersin

needed informations.. thank you very much..
http://www.creative-eye.ro arty

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

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?
http://www.dtails.com Jens

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 !
http://www.damianolivier.com Damian

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!
JonnybGood

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….
shyju

hi very nice script, can u make this vertical.??
Pingback: New Website for Caliber Hospitality | Visual Adventures Website Design Services
Pingback: Intergrating an Accordion Menu into WordPress with a cformsII plugin | Visual Adventures Website Design Services
http://www.igate.ro Iuhas Daniel

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
btw: it's a very helpful script
tym

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.
http://webi2.net nader

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 ..
http://www.bikealtitude.com Andy

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
Pingback: 25 JQuery Menus Ready For Download | Design your way
Pingback: 25 JQuery Menus Ready For Download | Web Development News
Pingback: 25 JQuery Menus Ready For Download « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
http://convertpsdtowordpress.com PSD to WordPress

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.
http://www.easwebdesign.com e. fairfax vere

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

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;
}
//–>
Jaka

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

Thanks
Regards
Jake
Kirsty

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

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.
http://www.cawleyconsulting.com Eric

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.
Steven

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.
Patricia Quintanilla

thank u so much.. is just what i was needing.. thank u thank u thank u!!!
http://www.depointless.com depointless

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

How can I have three accordions on the same page?
Valentin3182

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
Deiviz

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
Pingback: Elsewhere, on May 12th - Once a nomad, always a nomad
Ghandi

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.
http://no viki

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

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.
Sandman

MICHAEL IS MY MASTER NOW

Michael, you´re saved my life.
Alexandre

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?
Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples
Sid

its so cool… i have been searching it 4 so long. thnks
http://www.topstyle.com.br/ Thiago

Thanks for sharing, simple, practical, usefull!
Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples » abdie.web.id
http://eyedraw.eu/ Sweety

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
http://eyedraw.eu/ Sweety

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.
Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Html temp
Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples | TechFleck
Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples « Websitetutorials’s Blog
http://info9.in info9srinivas

hello! my friend!,
you really helped me in a very crucial time for my project.
thank a lot, lot, lot …..
_info9srinivas
http://www.raghibsuleman.com/ Raghib suleman

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
Pingback: Our 7 Favorite jQuery Effects for Templates « BoxedArt.com Web Design Blog
Maureen

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

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.
http://www.design-vibe.co.uk Web Design Norwich

Great blog! Thanks for sharing this as this will come in useful.
http://www.ndic.com/ santa barbara web design

Sometimes we have to reinvent things which are already existing to do things easier and less complicated. Great job Sir!
Pingback: Free E-book “Touring Arizona 2011″ « DoingAZ.com
S.

Hi Michael, I would like to add one picture on top of another picture as a header. When click on the top header image, the bigger under image shows and the top header image disappear?
http://www.playbasket.it

that's a really nice accordion with pleasing effect. 8
Triek khaled

Thank you friend
Boojaka

good work))
Jj101256

Hi I would like to produce this type of menu which when onmouseover a new layer appears with hyperlinks on – see coventry university – this type of effect
any ideas
hizlitv

I do site: http://www.ayftur.com/
Jj101256

nice, but I want it to have several links on each accordion image

Thanks
http://www.facebook.com/people/Iftikhar-Azeem/1525309387 Iftikhar Azeem

can we play it Auto?… autoplay
Mhenderson

Thanks!

Please do an autoplay
Philip Roskelly

Thanks, Michael – a nice piece of work
http://www.cutthechains.com/wordpress/ Theo Lantzakis

I am developing my site, cutthechains.com and looking for arty-farty cool stuff like the sliding menu and this is at the top of my list of cool things. Thanks scriptiny.com.
Theo
puta merda

puta merda
Pingback: Reklam Slayt Hali
Pingback: 20 jQuery Accordion Container Choices and Examples. :MS-Joe (Joe Stagner)
Salvadoresc

same here, the message s is undefined is a loop, on chrome using inspector start notiffying the error and is endeless…
Pingback: (011) More stuff « Intro Web Media Process Diary
College papers

My first visit your blog. This is a great article on this topic. I really impress your work
<a href="http://essaysale.com/">Thesis Writing</a>
Zhoudelun

if it can page
Zhoudelun

if it can page
ThEwHiStLeR

Is there a simple way to make is slide the other direction? So that I could have the text on the right side of each window?
Aalden

wondering if there is an easy way to adjust it for size? My images are 1000 W x 601 H…Total noob at javascript and stuff. Love the width that is visible when all panels are closed, but need to have the whole image visible when moused over…?
Thanks
@andreaalden:twitter
Aalden

Perhaps I should rephrase…

If I adjust the width in the css to a little less than the width of the image that I am working with, I loose not only the image to the overlapping slides, but the awesome movement that you have created with this slide bar.

@andreaalden:twitter
Asdf

did you find solution for autoplay?
Asdf4

can you post solution
Armvovanm

iou! did you find any solution for it??????
Bluefelix

Great accordian, wonder if anyone has figured out how to make it autoplay. Thanks!
erick

Hi,
The script is great but… I´m using the second script and if the horizontal movement is too fast over the accordion layers, the menu got frozen randomly and shows the inner layers half-open. Is there any way to solve this? I mean, to force the menu to full collapses any time the mouse is out of the accordion?
You can see what I mean in the second demo at the top of this page. Just move the mouse horizontally out of the accordion very quickly starting at any inner layer….
Anonymous

Download script is not like the above.
The 2nd link (version that collapses) begins with the first item open for some dumbass reason.
erick

Hi FartAtTheMoon.
The second script works fine as expected. But you have to change the last value in the HTML code to zero in order to show all the layers collapsed at the begining.

Change this:
<body onload="slideMenu.build('sm',200,10,10,1)">

to this:
<body onload="slideMenu.build('sm',200,10,10,0)">

It is explained quite clear in the text above. Read it again. And of course you have to change the width and height parameters in slidemenu.css in order to fix your images sizes. And maybe the second value in the script call. (change 200 to a proper value). I hope this can help you.

There´s a real bug instead: Fast horizontal mouse-out movements causes the accordion layers get frozen randomly and shows any layer half-open.

I have the script working fine in my home page. (I´m using an ugly patch to force the layers to its initial position on-mouseout regardless the mouse movement speed)

I hope Michael will read this post and fix this soon….
erick

I´m sorry, Disqus post system have deleted my HTML code indications, but I hope you get the idea… It is all explained in the text above.
Bpvargo

Any way to make it open to a % value of the window size instead of a pt value? i.e. If i want to make sure the accordion panel opens to 50% of the user's screen rather than an arbitrary pt value….

Thanks! Great script!!!!!!
Anonymous

muchos gracious, I'll take a look at this shortly!
lahmacun firini

Sharing is very beautiful and high quality
<a href="http://www.lahmacunfirini.com">lahmacun fırını</a>lahmacun fırını
Thanks!
Ibrahim

sharing is very beatiful thanks
rays

sharing is very beatiful thanks
Ivoclaudioribeirobarbosa

its possible to make this with mouse click and no mouseover?
Thanks
Radles

simply change the "onmouseover" function to "onclick".
HTMLn00b

I know this may be a ridiculous question, but I am trying to use this script on Weebly for my website. When I copy the HTML code into the custom HTML section, it comes up as a list of broken images. What am I doing wrong?
Mr E

Great script but why can't the variables be names, instead of single or double letters, its quite confusing to interpret for a beginner.. are their and explanations for this code?
Dezwebz

can this go vertical too?
Ehren

Absolutely fantastic–love it! Works like a charm.
http://www.polara.com
Guest

Ehren, if you would use AJAX the slider would not reload each time (now the pages are fully reloading due to the fact that you are using individual HTML pages) and the transistion would go smooth. Above that, the slider will not be reloaded each time.
Aina

Really nice! I do the same with my general purpose CSS animation library: ainalem.com/jellybean.html. However, I really like the lower bounce back version! Something I've not seen before..
Bbb

Where should i put setTimeout in this script so i can delay this slide function?
Sam

5 days to find this simple looking elegant solution – so much rubbish out there – this is simply genius. And it works on click simply by changing "onmouseover" function to "onclick"!!!!

I just wish I had the brains to code something like this – AMAZING.
x x x
Miguel

how can i set let o right margin between <li> ? thanks.
Miguel Antekera

how can i set left or right margin between <li> ? thanks.
guest

How do you add more then four menu options? I got it to take more then four, but its only repeating the last gif (4.gif) multiple times instead of letting me add a 5, 6 and 7
Intege

Hi There Thnx Man Edbassmaster
http://www.cyberdesignz.com/fan-page-design Fan Page Design

Nice work. it works fine.
can it work vertical or not.
Thanks.
http://creative-web-designer.com/ Magento web designer

Your content deserves as much credit as is humanly possible. I hope you continue to write on this informative topic. I’m looking forward to more.
Nina

how can i make the menu 1000px, while it will still have the slide effects? I have made the width of my images 520px, but they are standing next to each other without movements..
Nina

im sorry, i found the problem, in the body tag! thank you for the great scripts!
SALMAN AHMED

it is very simple and great

anyone know how to make it autoplay?
Angelika Widl

wow, thanks for your great work!
i'm wondering how i could affect the opacity as well,
for example set the opacity to 50% when the image is not extended, and 100% when i moved over with my mouse.

thanks again!
angelika
Gwendal Bars

simple CSS3 on li and li:hover should do the trick. check opacity in CSS3