Horizontal JavaScript Accordion 1kb

Design, Javascript 371 responses so far

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.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • 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
  • 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 :-P. 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&gt;

  • 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/&quot; 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
  • 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

  • Juliograffin22

    Do you have a vertical exemple about this?
    Thanks a lot brow!

  • Sirdyamite09

    i've tried to integrate this accordion into a html page, but I have some problems with the string: "<body onload="slideMenu.build('sm',200,10,10,1)">
    The problem is that I want to create an accordion to include in several html pages. So I don't want to call the function (slidemenu.build) in every pages' body. I tried to insert (onload="slideMenu.build('sm',200,10,10,1)") in a <div> but it doesn't work for me. any ideas?

  • Sirdynamite09

    The string is: div onload="slideMenu.build('sm',200,10,10,1)"

  • http://www.makrobilisim.net/ Web Tasarım

    it's perfect.thanks for your sharing.

  • Darknote

    and with the_post_thumbnail,it's possible ?
    thank you

  • Paul

    Love it!!! Is there a way I can control the width of the panels that are "closed" though?  I'm finding that a fraction of the content remains showing which is rather distracting. I'm working with three panels, the first opens to 750 px, I'd like the second and third to show at 150 px each, or have the first panel show 150px when panel 2 is open at 750px.  Is it as easy as specifying a total width of 1050px plus padding?

    Thanks!

  • Leatherwear

    Can you add a page link to each image?

  • Starlet

    Hi,
    how can I allign the tabs to the right of my side and make them fly out to the left?
    Actually I only need one tab to fly out in a precise amount of pixels.
    Also this flyout should be semitransparent.

    Thank you in advance-
    Pete

  • Paul

    Hi!

    In my use of this, I have panels containing images and text.  When the panels are closed, is there a way to display a smaller version of the content at a lower opacity, and have the text hidden?  I'm really quite a complete noob at this…. Any help would sure be appreciated!!!!

  • Mario

    Hi!
    Here is my contribution for this amazing script.
    To see the element reveal from center and not from left just use my code bellow.
    This make a very nice effect if you use this script for a photo gallery. Each picture start centered and then reveal both sides on mouse over.
    Just use this for each <li> element:

    <li style="background: url('picture1.jpg') 50% 0 no-repeat;"><div style="height: 200px;"></div></li>
    ('200px' is the height you want to see for the picture)

    Hope you enjoy.

  • Bohica032

    Thank you so very much for making this easy to use tool.  I had no problems customizing the look of the menu with css.

  • trung

    Thank you for this script. Very nice!

  • Rachelcarson97

    Hi,

    Thank you for your nice article. It will help me.

    Thanks
     

  • chetanvh07

    According to a study report
    it says that 72% small and medium business say that websites are the best tool
    to make a business famous.

    You may ask yourself, Why Get a Web Site ?
    Why do I need a web site.
    I already have a good customers. With an website, your
    product or service is accessible globally, to prospective customers 24 hours,
    365 days a year. More and more people these days are moving towards the
    internet as a first post of call because of the convenience and to save time.
    If people want information on a product or service, they are now saying, I think they have a
    web site, I'll check that out first.

      Because now a days websites are quicker,
    easier and more cost-effective to update than print based media. Therefore you
    can have pictures, details and prices of your products, company information, or
    maps indicating the location of your company’s. A web-site can play an integral
    part of your companies promotional and marketing strategy. It also makes a
    powerful statement about your business, showing that you have planned for the
    future by securing your on-line presence today.

       If you are looking for a Web designer or Web
    design company, you have come to the right place. Our company webdreams.in provides the best service
    for the web development. Webdreams.in has been to web development since from 5
    years, we have developed many more websites, and we are glad to announce that recently
    we had launched a new E-commerce website called lupine.in.

     We offer the following services:

    ·        
    Web Site Design – From single pages to entire
    sites

    ·        
    Multimedia Development

    ·        
    E-commerce – From online shopping to customer
    order management

    ·        
    Internet Marketing and Advertising

    ·        
    Web site statistics – Analysis of your site
    traffic

    ·        
    Web Site Hosting – Storage of Web sites on a Web
    Server

    ·        
    Domain Name Registration

    ·        
    Company Email Systems

    We help successful businesses become even more successful.

  • Joseph

    Thanks for sharing, I'll try it in my new project.

    Joseph, author and publisher.
    http://www.josytal.com – Affordable software for small business.
    http://www.directorygist.com – Directory of Free Web Directories.

  • Juliechen Net

    This is great. I'm not versed in js, so can someone tell me how to change the overall size of the menu? Also, how would I go about having multiple ones on the page, since it only works with the "sm" id?

  • http://www.facebook.com/people/Andrew-Spartan/100001550622428 Andrew Spartan

    – Open .JS file.
    – Find string   getElementById
    – Change it to getElementByClass  (use google to understand, it works kinda diffenrent)
    – change id="sm" to class="sm" in the menu

  • Mark

    You rock! 1kb awesomeness!

  • nery

    I tryed to have more than one menu on the page changing the js file with the use of getelEmentByClass. But it didn't work. i think because this search returns an array, and use it like a unique variable is wrong. But I don't know absolutely how to do.
    Another approach, used in this page, is make other pages and include them in a iframe… but I don't like it…

  • Lankan Kolla

    how to have the same vertically, please advice…

  • http://www.facebook.com/SmileLikeUMeanIt Adam Larsen

    This is an awesome script. Thank you.

    For a cool twist, use images that are wider than the containers and add this to your CSS:

    .sm img {width:100%;}

  • http://www.facebook.com/christian.oedab Christian Oedab

    great!!!!11111111111111

  • http://www.iwebxpert.com/ Daisy Bono

    Wow seeing the demo is an amazement already I wonder what will happen if I already put it on a website and users can see it. Surely they'll just stick to their mouse and play with it. Very nice and thanks for sharing this post.

  • Ben

    Awesome script! Worked well on a site I made. Now I have to work out how to implement it into a WordPress site!

  • http://www.anichandran.webs.com/ anichandran ayyanallur

    very nice ,, jquerypopupz.blogspot.com

  • Jady

    Hello!

    I use a png image with transparent background, but instead showing the transparent background, ever image get a white background, I try to set the div or li background to transparent by using CSS, but it seems not working, this seems like a javascript thing. Any ideas? Thank.