« Vertical Flyout JavaScript Menu
Sliding JavaScript Menu Highlight 1kb »
25
May

Horizontal JavaScript Accordion 1kb

Posted by Michael in Design, JavaScript

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

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 working in IE6, IE7, Firefox, Opera, and Safari. Please send any bug reports or questions to michael@leigeber.com. Feel free to use the script for any personal or commercial projects.

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.



1 Digg Spread This

252 Responses


[...] muy elegante a los Kwicks de MooTools o jQuery, de tan solo 1kb, y sin necesidad de depender de ningún framework. Ideal para cambiar esos menus horizontales tan sosos por estos con algo de [...]

Acordeón horizontal en Javascript de solo 1kb | aNieto2K on 26 May 2008 at 1:42 am

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

carlos leopoldo on 26 May 2008 at 2:19 am

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

Yonghwee on 26 May 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 26 May 2008 at 2:55 am

[...] Basite indirgenmiş güzel bir yatay akordiyon menü örneği. Bağlantı [...]

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ığı on 26 May 2008 at 6:36 am

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

techzen on 26 May 2008 at 6:56 am

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

muhammad on 26 May 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 26 May 2008 at 7:22 am

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

Tom on 26 May 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 26 May 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@leigeber.com.

Michael on 26 May 2008 at 7:36 am

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

Grundic on 26 May 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 26 May 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 26 May 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 26 May 2008 at 8:35 am

<strong>Lightweight JavaScript Accordion Menu (Only 1KB)…</strong>

This is a lightweight (only 1kb), accordion type JavaScript horizontal menu that does not require any JavaScript frameworks.
It is very easy to setup as the script automatically adjusts to the number of elements in the accordion and the dimensions of t…

Free Web Resources - Web Resources Depot on 26 May 2008 at 11:08 am

[...] 首先要感谢Michael,因为是他做出来的这个JS导航,并且之用了1kb,可以说是震撼了我.所以如果大家要转载的话.一定要把原始链接给Michael链接上. [...]

Booto’Blog » Blog Archive » 仅仅需要1KB的JS导航 on 26 May 2008 at 12:33 pm

[...] Michael Leigeber qui en est à l'origine, de plus son script est compatible IE6, IE7, Firefox, Opera, et Safari [...]

Menu en accordéon horizontal et glissant en 1kb ! on 26 May 2008 at 1:16 pm

[...] framework gerektirmeyen buradaki akordiyon menu hem kullanım kolaylığı hem de çok küçük boyutlu olması sebebiyle oldukça [...]

1KB’lik akordiyon Menu « basarozcan on 26 May 2008 at 2:12 pm

[...] Horizontal JavaScript Accordion – This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion. Tested working in IE6, IE7, Firefox, Opera, and Safari. [...]

Horizontal JavaScript Accordion on 26 May 2008 at 2:21 pm

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

Jake on 26 May 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 26 May 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 26 May 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 26 May 2008 at 4:01 pm

Yep, working fine on Konqueror!

Great Job!

Ayoze on 26 May 2008 at 5:56 pm

[...] blog Web Development Blog de Michael Leigeber est une mine d’or… les scripts proposés sont de toutes petites [...]

Free Tools, Le meilleur des outils gratuits pour webmaster» Blog Archive » Menu accordéon horizontal javascript (1ko) on 26 May 2008 at 7:23 pm

[...] LEIGEBER | Horizontal JavaScript Accordion 1kb Link: Web Resources Depot | Lightweight JavaScript Accordion Menu (Only 1KB) Posts [...]

Menu tipo acordeon horizontal con JavaScript, sin Frameworks | Seraphinux on 27 May 2008 at 12:30 am

[...] script è scaricabile a questo indirizzo, dove trovate anche la documentazione [...]

CSSMagazine » Blog Archive » “Accordion” in Javascript on 27 May 2008 at 2:21 am

[...] Horizontal JavaScript Accordion 1kb: menú estilo acordeón en un solo kilobyte y sin usar ningún framework. [...]

AOWS » Captcha al estilo iPhone on 27 May 2008 at 2:46 am

[...] à horizontal javascript accordion, un javascript de 1kb vous pourrez faire la même chose sans utiliser de [...]

Laserolame : X-OR’s Blog » Code Développement » 1kb Image Menu on 27 May 2008 at 3:36 am

[...] librería, y solo la utilizáramos en alguna entrada puntual). Por ello hay que destacar éste curioso menú realizado con Javascript que ocupa tan solo 1kb. Es simple, cumple su cometido, y puede quedar más o menos vistoso en función de las imágenes que [...]

» Menú en forma de acordeón con Javascript de 1kb | Informática Práctica | on 27 May 2008 at 5:19 am

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 27 May 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 27 May 2008 at 6:13 am

[...] in C# – Common StringBuilder Mistake in C# .NET – Sandboxing JavaScript Using <iframe> – MayHorizontal JavaScript Accordion 1kb – 40 Tips for optimizing your php code – Modern JavaScript Development: Reflection in JavaScript – [...]

Katod’un Seyir Defteri - 27.05.2008 at katodivaihe on 27 May 2008 at 6:41 am

Awesome work! I will put a link in my site

Ives on 27 May 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 27 May 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 27 May 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@leigeber.com

Michael on 27 May 2008 at 8:53 am

[...] clipped from http://www.leigeber.com [...]

RobertoBaca.net » Efecto de acordeón en javascript on 27 May 2008 at 8:27 pm

[...] Quer fazer aqueles menus estilo Accordion sem o uso de qualquer framework JavaScript? E ainda por cima o tamanho do Script é de 1KB. Sim, isso é possível, foi o que fez o Leigeber, dê só uma olhada lá. [...]

Accordion Horizontal em JavaScript com apenas 1kb » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards on 28 May 2008 at 3:01 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 28 May 2008 at 4:10 am

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

thanks

Gustavo Ribeiro on 28 May 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 28 May 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 28 May 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 28 May 2008 at 8:38 am

[...] here to view the working sample. Codes and Scripts, Javascripts, [...]

Horizontal Javascript Accordion Menu! - Opensource, Free and Useful Online Resources for Designers and Developers on 28 May 2008 at 10:24 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 28 May 2008 at 6:51 pm

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

Michael on 28 May 2008 at 8:56 pm

[...] 滑动菜单效果是非常酷的，但很多时候，我们不希望为了酷使用大量脚本，影响到网页的载入速度．现在，如果你想弄一个滑动菜单，那你不用担心这个问题了，Leigeber创建了一个1KB的横向滑动菜单脚本． [...]

1KB的横向滑动菜单脚本 | 帕兰映像 on 29 May 2008 at 1:37 am

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 29 May 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@leigeber.com

Michael on 29 May 2008 at 8:37 am

[...] Descarguenlo desde aquí [...]

Menu acordeon hecho en Javascript y de 1kb | Data2max.com on 29 May 2008 at 7:09 pm

[...] semana en muchos blog, se anunciaba un javascript con el que se podía crear un “Acordeón Horizontal” y ademas de solo [...]

Modificando el SlideMenu Horizontal | Cmacias.com on 30 May 2008 at 12:17 pm

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 30 May 2008 at 8:15 pm

[...] etc. y pueden tener problemas para usarlos en sus sitios web. Por eso me parece muy destacable Horizontal JavaScript Accordion, que puedes descargarte directamente en formato [...]

Menú acordeón para los que no entienden de programación on 31 May 2008 at 4:53 am

[...] Horizontal JavaScript Accordion 1kb [...]

This Month’s Best: May 2008 - Six Revisions on 31 May 2008 at 12:17 pm

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

ravaza on 31 May 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 31 May 2008 at 6:02 pm

[...] Horizontal JavaScript Accordion 1kb [...]

Weekly linkage madness - elisa.nobe.blog on 01 Jun 2008 at 1:02 am

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 01 Jun 2008 at 12:43 pm

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

Michael on 01 Jun 2008 at 12:53 pm

[...] 11- Horizontal JavaScript Accordion 1kb [...]

Websites you shouldn’t have missed in May 2008 on 01 Jun 2008 at 2:51 pm

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

Peter on 01 Jun 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 02 Jun 2008 at 1:30 am

[...] Horizontal JavaScript Accordion 1kb – Web Development Blog via kwout [...]

アコーディオン型メニューを作成するJavaScript on 02 Jun 2008 at 2:15 am

[...] 11- Horizontal JavaScript Accordion 1kb [...]

Best Design Articles from May 2008 on 02 Jun 2008 at 4:16 am

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

Michael on 02 Jun 2008 at 8:17 am

[...] Horizontal JavaScript Accordion 1kb – Web Development Blog (tags: javascript menu accordion) [...]

» links for 2008-05-27 | Paul Cowles on 02 Jun 2008 at 6:17 pm

[...] something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for [...]

Horizontal JavaScrip SlideMenu | ShekLOG on 03 Jun 2008 at 6:53 am

Wow, now that is just impressive.

Rob on 03 Jun 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 04 Jun 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 04 Jun 2008 at 3:29 pm

[...] dem Blog findet ihr auch eine Demo des Scripts. ord = (typeof(ord)!=’undefined’) ? ord : Math.random()*10000000000000000; [...]

JavaScript Accordion - 1kb - im Designpicks Blog on 05 Jun 2008 at 6:52 am

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 05 Jun 2008 at 4:22 pm

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

Michael on 05 Jun 2008 at 4:25 pm

[...] Visit Download [...]

NETTUTS - Web development tutorials and links - Best of the Web - May on 06 Jun 2008 at 5:10 am

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

Prof Kienstra on 06 Jun 2008 at 5:59 am

[...] Nuevo menú con el tan de moda efecto acordeón que nos llega desde Leigeber. Está realizado en javascript desde cero y sin el uso de ninguna librería estilo jQuery pensando solamente 1kb. Los podemos usar como menú, presentar algo o lo que se nos ocurra. La implementación es sumamente fácil, solamente tendremos que crear una lista desordenada a la que darle una id que usaremos como indicador para el script. El resto de pasos son los de siempre, cargar entre head /head el script y llamar a una pequeña función. Está testeado en IE6, IE7, FireFox, Opera y Safari. Otra forma para crear menús vistosos de forma muy fácil, con un peso mínimo y varias opciones de personalización. [...]

diarioTHC | Menú horizontal efecto acordeón on 06 Jun 2008 at 11:57 am

[...] Horizontal JavaScript Accordion – acordioane orizontale ştim, dar iată unul vertical interesant. La anumite design-uri poate fi ideal. [...]

Leigeber: Web Development Blog | CNET.ro on 06 Jun 2008 at 12:32 pm

[...] Sadece 1Kb lık güzel bir JS akordiyon menü. Bağlantı… [...]

Surf Raporu 07 Haziran 2008 | Taylan Aktepe on 07 Jun 2008 at 3:10 pm

[...] Visit Download [...]

CSS Dev Kit » » Best of the Web - May on 09 Jun 2008 at 9:45 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 10 Jun 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 10 Jun 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 10 Jun 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@leigeber.com

Michael on 10 Jun 2008 at 3:19 pm

[...] Now, if you want a sliding menu, you needn’t care that any more. Because Leigeber created the light sliding menu script just [...]

Sliding Menu Script | Web Tool OnLine on 10 Jun 2008 at 11:31 pm

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

fedmich on 11 Jun 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 11 Jun 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 11 Jun 2008 at 12:41 pm

[...] Leigeber a publicado un menú acordeón en posición horizontal animado que solo pesa 1kb, sin duda una bonita alternativa a otros [...]

Menú acordeón en javascript on 12 Jun 2008 at 12:06 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 12 Jun 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 15 Jun 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 15 Jun 2008 at 7:20 pm

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

michael on 15 Jun 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 16 Jun 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 18 Jun 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 19 Jun 2008 at 8:08 am

[...] Download do Script Aqui – Mais informações e demos Menu Horizontal Acordion [...]

Menu Acordion em Somente 1kb | RuanWeb on 19 Jun 2008 at 8:18 pm

[...] Horizontal JavaScript Accordion – This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement. [...]

Accordion Scripts | WebTecker the latest Web Trends, Resources and News. on 19 Jun 2008 at 8:45 pm

[...] Via | Leigeber [...]

Menu orizzontale con effetto fisarmonica via JavaScript! - Geekissimo on 28 Jun 2008 at 6:01 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 29 Jun 2008 at 9:29 am

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

mp on 29 Jun 2008 at 9:31 am

[...] Nuevo menú con el tan de moda efecto acordeón que nos llega desde Leigeber. Está realizado en javascript desde cero y sin el uso de ninguna librería estilo jQuery pensando solamente 1kb. Los podemos usar como menú, presentar algo o lo que se nos ocurra. La implementación es sumamente fácil, solamente tendremos que crear una lista desordenada a la que darle una id que usaremos como indicador para el script. El resto de pasos son los de siempre, cargar entre head /head el script y llamar a una pequeña función. Está testeado en IE6, IE7, FireFox, Opera y Safari. [...]

Con mis movidas… y mis lios » Menú horizontal efecto acordeón on 30 Jun 2008 at 10:56 am

[...] Horizontal JavaScript Accordion – This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement. [...]

Great Accordion Scripts | Ajaxonomy on 01 Jul 2008 at 3:45 am

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

Affordable Web Design on 01 Jul 2008 at 9:50 pm

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

Alex on 02 Jul 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 02 Jul 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 11 Jul 2008 at 3:03 am

[...] 11- Horizontal JavaScript Accordion 1kb [...]

DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog on 14 Jul 2008 at 7:13 pm

Where is the demo???

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

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

Michael on 15 Jul 2008 at 6:31 pm

[...] 【その２】 JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」 [...]

B豚の備忘録 - マウスオーバー、クリックでメニューが展開するアコーディオンUI色々 on 16 Jul 2008 at 9:12 pm

[...]   Similar : Image menu de la http://www.phatfusion.net  si Horizontal Java Script Accordion-1kb de la http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/  [...]

www.marwebdesign.net » Blog Archive » “Concertina menu” on 22 Jul 2008 at 1:39 pm

[...] Horizontal JavaScript Accordion 1kb – Web Development Blog This versatile 1kb horizontal JavaScript accordion script (tags: javascript webdesign css) This entry was written by delicious and posted on July 23, 2008 at 3:34 pm and filed under links. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. [...]

i.ndustrio.us » links for 2008-07-23 on 23 Jul 2008 at 5:34 pm

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

Cool Interesting Facts on 27 Jul 2008 at 6:50 am

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

Darrin on 28 Jul 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 28 Jul 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 29 Jul 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 03 Aug 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 04 Aug 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 04 Aug 2008 at 7:05 am

Good Work

wed on 05 Aug 2008 at 1: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 05 Aug 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 05 Aug 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 06 Aug 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 06 Aug 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 06 Aug 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 06 Aug 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 08 Aug 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 08 Aug 2008 at 9:05 am

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

Leon on 12 Aug 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 12 Aug 2008 at 8:15 pm

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

felix on 13 Aug 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 14 Aug 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 15 Aug 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 18 Aug 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 20 Aug 2008 at 2:33 am

[...] Download do Script Aqui – Mais informações e demos Menu Horizontal Acordion [...]

Mateus Souza » Arquivos do Blog » Alguns Scripts em Java on 22 Aug 2008 at 8:07 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 01 Sep 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 01 Sep 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 05 Sep 2008 at 10:45 am

[...] Horizontal JavaScript Accordion 1kb – Web Development Blog LEt's say you dig mootools kwick menu/horizontal accordion. Let's say you only need that JS, not a whole library. And it's under 1kb. Sweeeet. (tags: webdev webdesign web2.0 web tutorial tools slider scripts kwick accordion) [...]

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 on 12 Sep 2008 at 2:03 pm

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 13 Sep 2008 at 5:56 pm

Wow, this is awesome.
Thanks

Anoop Kumar on 14 Sep 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 15 Sep 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 16 Sep 2008 at 3:21 am

[...] Javascript ile hazırlanmış hareketli ve resimli bir menü. Yukarıdaki resim size anlamsız gelebilir ama oldukça güzel bir menü. One, Two.. yazan yerlere kendi hazırlamış olduğunuz resimleri yerleştirdiğinizde ortaya çıkan sonuç oldukça iyi olacaktır. Web sitelerinde kullanılar görel güzel bir menü oluşturabilirsiniz. Sizi menüyü denemek ve download etmeni için buraya alayım. [...]

renkli teneke » Resimli Horizontal JavaScript Menu on 16 Sep 2008 at 8:49 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 18 Sep 2008 at 5:17 am

Hi,
Great work,

Test on 21 Sep 2008 at 1:30 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 21 Sep 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 24 Sep 2008 at 2:50 pm

Thanks for your script.
Great work.

Maricusa on 29 Sep 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 01 Oct 2008 at 8:28 pm

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

Nemanja Cosovic on 02 Oct 2008 at 4:50 pm

Thanks, great article!

SB on 03 Oct 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 08 Oct 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 10 Oct 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 11 Oct 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 15 Oct 2008 at 5:32 am

Thanks govo, I’ll check it out asap.

Nemanja Cosovic on 17 Oct 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 17 Oct 2008 at 10:22 am

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

Wally on 17 Oct 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 18 Oct 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 19 Oct 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 19 Oct 2008 at 2:23 pm

Stupid question. :) Sorry.

Nemanja Cosovic on 19 Oct 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 19 Oct 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 20 Oct 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 22 Oct 2008 at 3:07 pm

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

Jack on 24 Oct 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 26 Oct 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 28 Oct 2008 at 3:30 pm

[...] 11- Horizontal JavaScript Accordion 1kb [...]

Websites you shouldn’t have missed in May 2008 | Noupe on 29 Oct 2008 at 11:13 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 13 Nov 2008 at 10:32 am

[...] view demo [...]

Blog.Skynapse » Javascript Accordians on 14 Nov 2008 at 11:28 pm

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 17 Nov 2008 at 7:44 pm

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

john carpenter on 18 Nov 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 18 Nov 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 19 Nov 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 20 Nov 2008 at 3:36 am

sweet and simple. thanks mate.

Amila on 22 Nov 2008 at 9:57 am

wow it’s soo simple! Thank you!

Ivo Ivanov on 22 Nov 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 22 Nov 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 24 Nov 2008 at 4:15 pm

[...] here to view the working sample. Javascript, [...]

Horizontal Javascript Accordion Menu! | Greep It on 27 Nov 2008 at 4:32 am

[...] mas info en: http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ [...]

Gabi’s Toolbox » Blog Archive » Javascript Horizontal Accordion on 27 Nov 2008 at 11:28 am

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 28 Nov 2008 at 2:40 pm

Very good tutorial thx.

mobilya on 14 Dec 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 16 Dec 2008 at 12:39 pm

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

Website Design on 16 Dec 2008 at 9:34 pm

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

Ryan on 18 Dec 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 18 Dec 2008 at 5:17 pm

[...] é muito leve (possui apenas 1kb). Para ver um exemplo do script em funcionamento visite a página http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/. Clique nas opções One, Two, Three, Four que aparecem na barra horizontal verde para observar o [...]

SITE HORIZONTAL COM JAVASCRIPT | NET PORTAIS on 19 Dec 2008 at 12:01 am

Hi,

This is a great piece of javascript.

3faycom on 29 Dec 2008 at 12:06 am

Beautiful Script.. i hope my client likes it

Denis on 07 Jan 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 12 Jan 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 21 Jan 2009 at 5:38 am

I search Google this script comes first. very nice

Bala, India on 21 Jan 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 26 Jan 2009 at 7:28 am

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

Rami on 26 Jan 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 28 Jan 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 29 Jan 2009 at 7:31 am

It doesn’t work in Safari 3

levski on 31 Jan 2009 at 11:43 am

[...] 演示|下载 [...]

大量折叠效果：酷站+免费下载+简单教程 | 前端观察 on 02 Feb 2009 at 12:37 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 06 Feb 2009 at 8:33 am

hi, its really nice

hi on 06 Feb 2009 at 10:56 am

I had downloaded the

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

Saravana Kumaran.T on 07 Feb 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 11 Feb 2009 at 4:47 pm

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

Sam Allen on 12 Feb 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 13 Feb 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 16 Feb 2009 at 3:50 am

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

olivier on 16 Feb 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 19 Feb 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 19 Feb 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 28 Feb 2009 at 11:39 pm

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

Thanks man!

bluedee on 03 Mar 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 09 Mar 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 13 Mar 2009 at 1:19 am

[...] Link [...]

10 Accordion Javascript da non perdere | Webquadro.it on 13 Mar 2009 at 7:51 am

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

RS on 18 Mar 2009 at 7:58 pm

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

sonal on 21 Mar 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 22 Mar 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 24 Mar 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 25 Mar 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 25 Mar 2009 at 1:58 pm

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

Jim on 25 Mar 2009 at 2:06 pm

[...] Önizleme – Download [...]

Web Projeleriniz İçin 10 Akordiyon Menü - Miraç Baran Satıç’ın Günlük Blogu on 31 Mar 2009 at 1:56 am

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 01 Apr 2009 at 2:59 am

[...] Leigeber acaba de publicar un excelente menú acordeón horizontal animado que tiene tan sólo 1 kb. Sin duda será una muy bonita alternativa a los ya [...]

Menu acordeón en javascript de tan solo 1kb at Blog Borchani Studios on 03 Apr 2009 at 12:30 pm

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

NYWebTeam on 03 Apr 2009 at 9:23 pm

前来支持下！！

upwind on 07 Apr 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 14 Apr 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 24 Apr 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 27 Apr 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 03 May 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 13 May 2009 at 12:15 am

thanx perfect js code man :)

seo on 19 May 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 19 May 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 21 May 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 22 May 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 26 May 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 26 May 2009 at 3:12 pm

Hi! Thanks for the tip. Its amazing

Lalo on 11 Jun 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 12 Jun 2009 at 6:43 am

[...] Horizonal Accordion Menu | Demo [...]

30 Javascript Menu Plugins and Scripts « Dogfeeds——IT Telescope on 13 Jun 2009 at 7:35 am

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

roboflexx on 21 Jun 2009 at 9:13 am

[...] Horizontal JavaScript Accordion 1KB [...]

10 Awesome free accordion scripts and tutorials « Paul Rostorp’s Blog on 24 Jun 2009 at 10:14 am

[...] http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ [...]

Voilá, mein erster Slider-Nachbau :) | team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community on 24 Jun 2009 at 2:32 pm

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 25 Jun 2009 at 12:54 pm

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

ookris on 27 Jun 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 28 Jun 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 02 Jul 2009 at 6:20 pm
Trackback URI | Comments RSS

Leave a Reply

RSS Feed | Email
Powered by FeedBurner
Recent Links
  • Graphic Rating Web Design & Development Blog
  • Splashy Icons Free mini icon set similar to FamFamFam.
  • amCharts Flash charts for your websites and applications
  • Web Resource Depot Features daily web resources and scripts for web developers.
  • Ajax Rain Resource for open source Ajax and Javascript scripts.
  • stock.xchng Large community-driven free stock photography resource.
  • ReadWriteWeb Popular blog on web technology trends and social media.
  • UI Patterns User interface design patterns by example.
more links | suggest a link