jQuery Examples – Horizontal Accordion

Standard Posted on by 220 Replies

Up until now I have always used Scriptaculous / Prototype for any Java Script animation and effects, but lately I’ve heard a lot of good things about jQuery. So, I thought I would give it a try, and start doing some experiments.

In this example, I have created an accordion effect that reveals a caption for each thumbnail. I’ve done similar navigations like this in flash, so I wanted to see how it compared to doing it with jQuery.

In order to use jQuery in your pages you first need to download the latest release and then include the Java Script library within your head tags.


<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>

Now lets take a look at the html for this example. I gave the first anchor tag an id, so that we could set an initial width and make it appear expanded when the page is loaded.


<ul>
  <li>
    <a id="a1">
      <img src="images/free_thumb.jpg" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="images/tut_thumb.jpg" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>
  <li>
    <a>
      <img src="images/inspire_thumb.jpg" />
      <p>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </p>
    </a>
  </li>
</ul>

Here is the CSS, which is pretty straight forward. The main thing to note is the fixed height being set on the anchor tag. Doing this along with “overflow: hidden” prevents the contained p tag from dropping down below the thumbnail.


ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

And here is the jQuery script that makes it all happen. This can be placed in the head tag. The first thing we do is set a few initial variables: lastBlock represents the block that is already expanded, maxWidth is the width we want our block to be when it is expanded, and minWidth is the width when it is not expanded.

Then we simply set a hover event on all anchor tag contained within all list items. Within the hover event we make two calls of the animate() function: one to close the lastBlock, and another to expand the block we are hovering. Then we set lastBlock equal to the block we just expanded. That way jQuery will know which one to close the next time the hover event is fired. The animate() function allows you to create custom animations by setting new values for multiple properties. In this case we are only animating the width.

One important thing to note is setting “queue” to false. If it is set to true, every hover event is stored and will be animated one after another, resulting in opening and closing long after the last hover happens.


<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;	

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );
});
</script>

For more info on the animate() function and other jQuery goodness, check out the official documentation.

  • http://www.red-root.com Luke

    It all looks so simple when it’s laid out like this! Thanks a lot, I’ll be sure to implement this soon.

  • Paige Davis

    Hello webmaster…Man i love reading your blog, interesting posts ! it was a great Saturday .

  • http://www.madewira.com/blog madewira

    thanks for the example :)
    I’ll create one for my blog

  • Dave

    You’re using an iframe to display it here. How would you use it on a page with other list elements. I suppose what I need to know is, how would you alter the javascript so that it only affects, say, a DIV titled “accordion”?

  • http://www.ainsworthstudio.com Josh Read

    You are the MAN! I’ve searched high and low for how to do this. Thank you, thank you, thank you.

  • http://henryjones.us Henry

    Dave,

    No need to worry about the iframe, that is just how I chose to show the example within this post. The code snippets in this article don’t reference the iframe at all. So, if you follow this example it should work for what you are trying accomplish.

  • Zulfikar Dharmawan

    Why do i get this error:
    handler has no properties
    ?

  • Pingback: Websites you shouldn’t have missed in April 2008

  • George Bridgeman

    Zulfikar,

    I had the same error today with some other code, found this post and figured I’d post my solution.

    You’ll get the ‘handler has no properties’ error if you’re setting up a hover event and don’t pass one of the arguments. If you don’t have code to fire when the cursor leaves an element, you must pass an empty function or you’ll get this error.

    As an example, you can’t do this (sorry if formatting goes belly up):
    $(‘a’).hover(function() {
    doSomething();
    });

    You have to do this instead:
    $(‘a’).hover(function() {
    doSomething();
    }, function() {
    // nothing to see here.
    });

    That fixed it for me, anyhoo. Hope this helps!

    George.

  • http://beyondrandom.com BeyondRandom

    Might have to use in my new project! thanks alot

  • http://www.capsizedesigns.com Mike Crittenden

    Doesn’t seem to work in Opera 9.27 on XP…anybody else seeing that?

  • http://www.jankoatwarpspeed.com Janko

    Awesome example!

  • http://blog.jeremymartin.name Jeremy Martin

    Nice script – certainly impressive for a first stab at jQuery!

    I recently worked on a similar project and found that “jitter” effect to be difficult to get rid of. If you’d like to examine my approach to the problem (which ultimately came out pretty jitter free), you can check it out here: http://www.jeremymartin.name/projects.php?project=kwicks

    Feel free to rip any code you like!

  • http://www.redesignyourbiz.com RedesignYourBiz.com

    Check this website: http://www.kriesi.at/
    It is using the same script.

    Also check my website and let me know how it is :)
    http://www.redesignyourbiz.com

    I also have some beautiful wallpapers and ecards on my website… check them out.

    Thanks

  • lex

    the apple website uses that script in downloads page ;) !

  • Ankur

    Does not work in Opera 9.27

  • Ankur

    Based on comments from “RedesignYourBiz.com” above the same script is used in http://www.kriesi.at/ and when I visit that site the acordian works just fine. Not in this site though?

  • Junkie234

    Does anyone have a solution for the Opera issue?

  • http://henryjones.us Henry

    Junkie234,

    That is strange behavior in Opera. When I get a free moment, I’ll check it out.

  • Opera

    Doesn’t work in Opera 9.50beta (xp)

    They just kinda shudder a bit, and the text flows off bottom.

    =(

  • http://www.a-better-tomorrow.com/ Andre

    Ah cool. Very useful. Thanks for the snippets.

  • http://blog.jeremymarin.name Jeremy Martin

    @Ankur
    Not to toot my own horn twice in the same thread, but the script used on kriesi.at is actually from here: http://jeremymartin.name/projects.php?project=kwicks
    … which would explain the different Opera experiences…

    Regarding the Opera bug though… I experienced a similar issue with Safari 3.1.1, which could be resolved by running the plugin after the document.onload, rather than the jquery.ready()… has anyone tried that yet?

  • http://na Jim

    This code is great, but I’m running into a problem – the right-most accordion will not disappear in FireFox 2.0+. Currently, I’m solely using 2 Accordions, and the behavior works fine for the left-most accordion when selected or deselected, but the right most does not. when the right most accordion is selected it appears as it should, but when deselected, it scrolls to the right, but the content does not disappear. It is not ‘there’, that is to say it’s not selectable, but it is in view. The content within my accordions are IFRAME’s that draw another page of content. I did this because in it’s implementation, there is a great deal of text that we want to place in these locations, however we do not have the vertical realestate. Again, in IE, the code works masterfully, but in firefox, the right-most Accordion’s content does not disappear when it is deselected. I’ve played with the code a bit to see if I would be able to correct this myself, to no avail. Any suggestions? This is by far the best solution I’ve found, and would hate to abandon the horizontal accordion element because the content IFRAME would not disappear…

  • http://henryjones.us Henry

    Jim,
    So does it work for you without using the iframe? Just trying to narrow down the possible causes.

  • http://na Jim

    Yes, it works with simple text in Firefox. In an attempt to work around the issue, I tried to us an overflow:auto in a div, and that was a failure as well. I’d love it to be effective with an IFRAME, but now i need to make my layout work without the IFRAME…

  • http://na Jim

    I found a very suitable work-around. While it does cause me to duplicate code both inline and in the external page, the Dyn-Web DIV Scroller:

    http://www.dyn-web.com/code/scroll/

    Does perfect both the horizontal scrolling and the vertical content scrolling within them.

    Hope it’s useful…

  • Rich Lovelock

    This is great thank you.

    I am getting the following javascript error:

    ‘handler has no properties’

    I couldn’t work out from George Bridgeman’s comment exactly what I need to change to fix this. Can anybody offer any advice to solve this problem please?

    Many thanks
    Rich

  • http://vipstephan.de Stephan

    Nice one, indeed. However, you have errors in your HTML and it’s not good to show/give people erroneous code. The most obvious errors are that you are putting block-level elements (e.g. paragraphs) inside an anchor element which is an inline element and can’t contain block elements.

  • http://www.hamropalo.com hamropalo

    great stuff , i m going to use right now at my popular news site hamropalo.com

  • Aaren

    I cant get it to open a initial box. The ID is correctly set. If I make it #a1 { width: 200px !important } it applies a height, but then never shrinks down. If I make it #a1 { width: 200px }, nothing happens on load.

  • Aaren

    Fixed the #a1 problem by simply adding style=”width: 100px” to the element I wanted open when the page started.

  • Aaren

    How do you use more than one of these on a page?

  • http://www.jxk.cz JxK

    Realy nice,

    but IE shows this erron in tray “guid is null or not an object ” … ? Does enybody know how to fix it..

    And it is not HTML valid code… element p cant be within element a … how to fix this…

    Thanks

    JxK

  • Leif

    Howdy,

    Thanks for the great jquery plug-in. I used it on the home page of this site: http://www.daviscompany.com

  • Mahmoud M. Abdel-Fattah

    IT’s GREAT SIMPLE ONE !
    but I’ve a problem when I put large image in the paragraph , the lastblock shifts to the right and not shrinking !!
    here’s a screen shot :
    http://img129.imageshack.us/my.php?image=jqueryeq5.jpg

  • Mahmoud M. Abdel-Fattah

    @Aaren,
    u should change the a1 here : lastBlock = $(“#a1″);
    to the id of ur other menu, for example :
    lastBlock = $(“#menu2_a1″);

    and change the ul here : $(“ul li a”).click(
    to the id of other menu ul, for example ;
    $(“menu2 ul li a”).click(

  • Mahmoud M. Abdel-Fattah

    Here’s a link for the problem :
    http://www.hdeya.com/other/duettographics.com/

  • http://www.mrcatto.com Catto

    Great web site!
    I’m having the same problem as JxK with IE. I get an error, E shows “guid is null or not an object”.
    I’m using jQuery 1.2.6

    Any thoughts?

  • Aaren

    I’ve followed this perfectly, copied this code for code, and still can’t get the #a1 to stay open on page load. Any ideas?

  • Aaren

    Problem Solved CORRECTLY this time:

    I was doing this:

    #a1 { width: 274px }

    When my css needed to be this:

    ul li a#a1 { width: 274px; }

  • http://www.friskdesign.com Matthew Hill

    For the IE “guid” problem, you need to fix your function thus:

    $("ul li a").hover(
    function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
    $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
    lastBlock = this;
    }, function() {
    // empty function for 'hover-out' to prevent errors in IE
    });

    Also, I get a kind of ‘blip’ using this technique — the item that is going from small to large seems OK, but the item going from large to small seems to sometimes decrease in size a fraction more than it should during the transition. Looks very strange. Anyone else notice this?

  • http://r-styles.blogspot.com/ R-Styles

    this is so cool ! i had to add a position:absolute though for it to work well in IE6.

  • Pingback: Jequery For WordPress | Pixel Shoppe

  • http://www.hamroawaaz.com/ United Voices

    This jQuery slider is just too good.

  • Stretch

    Example seems to have disappeared.

  • http://www.bgpages.com dimi

    This effect is cool. thanks for the example.

    Regards
    Dimi

  • http://www.okubi.com okubi

    how can i download it ?

  • http://pdclark.com Paul

    I love this effect. I did an entire Joomla portfolio site using it as the navigation interface: http://charlieleduff.com

  • http://scriptnode.com/ matt

    First off, these lines:

    lastBlock = $(“#a1″);
    maxWidth = 210;
    minWidth = 75;

    Are all in the global scope. Use “var” to fix this. Second, you’ve got that “handler is not defined” error. :(

  • http://rildrim.com Rildrim

    Hi, very cool menu, but what if I want to move the tabs on click instead of by hover?
    thank you

  • http://dvwebdesign.com Hiram

    Hi, great script, thanks for this!
    However, I am having a few issues.

    First, everything is loading open. How do I get them to load closed, and then only open when I hover over the image?

    Second, in firefox, the accordian never loads properly when I open the page. I have to refresh it several times to get it to load all the way. And then, the last image on the right stays open, and I can’t close it unless I leave the page and hit the back button. After that the last image opens and closes properly.

    Here’s the link: http://www.cbtemecula.com/test.php
    I hope someone can help! Thank you!

  • http://dvwebdesign.com Hiram

    Ok it seems I somehow fixed the 2nd problem, but I still can’t seem to get the page to load with all of them hidden. I have the first one on the left with the id=”a1″ which I thought would load the page with only the first item open, but they are all open until you hover over them.

    http://www.cbtemecula.com/test.php

  • Hiram

    No one can help?

  • http://www.dayspringproductions.com Dayspring

    First of all, I found this to be a huge inspiration and resource. It also works smoothly and looks great!

    However, I wish I could use the separate anchor tags as divs instead, so I can link to things from within them. Is there any way to do this? I kind of a noob when it comes to java of any kind, so any sort of help would be fantastic.

    Other than that, I am deeply impressed!

  • http://www.dayspringproductions.com Dayspring

    Nevermind :) Figured it out. Thanks.

  • http://dvwebdesign.com Hiram

    Well I started from scratch and got it to work, not sure what I was doing wrong before. Looks awesome now. Check it out: http://www.cbtemecula.com/people.php

    Thanks for this!

  • http://www.yuukoostudio.com benak

    Nice trick !!
    I just made a little improvement :
    - add var before the 3 variables
    - use mouseover function instead of hover. hover function generate an error.

    Anyway thank you.

  • http://developdaly.com/ Patrick Daly

    I’ve got everything working in IE7 & FF, but FF handles the animation less smoothly than in IE7. Are there any performance enhancements I could do with my code? Here ’tis: http://clients.developdaly.com/act/

  • http://www.ghosthorses.co.uk Stephen Fairbanks

    This is really quite lovely. Thank you very much for this. I’ll be RSS-ing this website from now on.

  • http://www.knockoutdesigns.com.au Damir

    Thank you very much. Works awesome!!!

  • John

    Excellent accordion. Thanks to jquery and all contributors.

    @Hiram: to get rid of the minor irritation of the first image (#a1) not loading quite to full size, and then expanding slightly (4px to be exact) on first mouseover, in CSS change:

    ul li #a1{
    width: 250px; float:left;

    to

    ul li #a1{
    width: 254px; float:left;

    I’m looking to utilise this on a website I’m building for a friend.

  • Marc

    Hi! How can I add a text-link into every one of the tabs without collapse it? I’ve tried to do it, but it moves all the tabs and shows up wrong.

    I must say that’s an awesome script! ;)

    Regards

  • Chris

    Any ideas how this menu design canbe implemented in a drupal theme? Thanx in advance, if anyone answers :)

  • John

    Oooooo I have been looking for this!!

  • Pingback:   8 “Accordéons” JQuery | In-my-head

  • http://corp.magnacounter.com/ Walter

    Hi, i am going to implement it on one site, thanks very much and keep up the good work !

    Walter

  • roshan

    I want to put image in right side and text in left side on this accordion. how i can do this. could you help me

  • Pingback: 30 Javascript Menu Plugins and Scripts « Online Free Application Software Tips Tools Wallpapers

  • Pingback: 8 Layout Solutions To Improve Your Designs | How-To | Smashing Magazine

  • Pingback: 8 Layout Solutions To Improve Your Designs « A Designer’s Trash, Another’s Treasure

  • Pingback: Grumpy Git . org » Blog Archive » 8 Layout Solutions To Improve Your Designs

  • Pingback: 8 Layout Solutions To Improve Your Designs | jeremiahnellis.com/design_life

  • Pingback: 8?????????????? | ????ISong?????™????

  • Pingback: ??????????????? | ???????...

  • http://www.jimmo.net Riad Marrakech

    Wooow aswome I love the concept

  • Pingback: ??|8 layout solutions to improve your designs | ????????

  • Pingback: 30 menus basados en tabs y acordeones animados « Scripts Web

  • Pingback: 30 Adet birbirinden güzel Javascript Menüler

  • Pingback: 30 Javascript Menu Plugins and Scripts « Dogfeeds——IT Telescope

  • Pingback: ???????8?????[SM] | Beleben Design

  • Pingback: ?????????8?????

  • http://rdcomms.com Cassandra

    Would it be possible to make it work as a page postback if javascript is turned off?

    Can you give me some suggestions?

    Thanks,
    Cassandra

  • http://adih Asha

    Great one!!
    BUT its not working with IE7 but works with IE8 and Firefox..
    PLS HELP ME to SOLVE this issue…

  • http://adih Nidhika

    it doesnt seem working in IE7 ..Pls help me

  • http://adih Nidhika

    its not working in Windows XP /IE7…
    pLS HELP ME OUT….

  • Pingback: Performancing Stream of Consciousness – Mon Apr 28, 2008 : Performancing

  • Elliot

    I was just wondering how i would go about making this script’s overflow hidden if it goes over to another div I tried “overflow: hidden” but it doesn’t seem to be working for me any ideas…

  • http://llihp.blogspot.com Phill Pafford

    I’m using your code base and have modified it to use with tables instead of the ul li that most do. I have it working for the most part except in FireFox the animation is jerky and not smooth like IE6 & 7 (yes I know it’s normally the other way around, LOL). any chance you could give any feed back on my code?

    Demo is here: http://jsbin.com/ifomo

    Forum Question is here: http://stackoverflow.com/questions/1126489/jquery-examples-horizontal-accordion-table-instead-of-un-ordered-lists-upda

    Thanks a ton,
    –Phill

  • http://www.wueweb.de Goerni

    Hi all,
    nice tutorial, but i was missing the bg.gif in the Stylesheet.

    Complete the “ul li” like this

    ul li {
    background:transparent url(../images/bg.gif) repeat-x scroll 0 0;
    ….

    Greets from Würzburg / Germany

  • Pingback: 3 Semplici ed utili tutorial per jQuery :: Dynamick

  • Pingback: SOHU????????-????? » ??????????8?????

  • http://www.non-fiction.com.au Carolyn

    A few people have mentioned the right most accordion didn’t “collapse” as expected. I had this issue & realised it was because I was using an image for the content. I made it a background image instead, and problem solved. :)

  • http://www.non-fiction.com.au Carolyn

    How to add a second Horizontal Accorion to a page? Is this possible?

    I have one Horizontal Accordion working perfectly, but I’d like to have more than one on the same page – how would I code this into the jQuery script in the header? The first section in my 2nd Horizontal Accordian uses the id “#a2″.

    I’ve placed my first Accordion in a wrapper div with class .jq_menu, so for it, I’m currently using: $(“jq_menu ul li a”).hover(
    function(){

    I would like to use $(jq_menu2 ul li a”) etc for the next one.

    Thanks for any help, and thanks so much for the tutorial – I’m really happy so far with the way it’s working in my new site (which is almost ready to go live!)…

  • Pingback: PraveenTech Research Labs » Blog Archive » 30+ Animated Tab-Based Interface and Accordion Scripts

  • http://- Rajesh

    After spending some time I could integrate this in my site using iframe. Now the problem I am facing is I cant put links inside the ‘p’ tag where some content and a few links to other pages is required.

    Since you cant insert a tag inside a tag and you have to compromise with content only.

  • http://www.nomiinfotech.com/ Web Development India

    Jquery is very useful for designers and this article tell about it.

  • Guillaume

    Hi, this is a great one!
    As mentioned in comments, I have the problem with pictures : if I want to put a picture in the right side, it appears above the accordion (with IE 8, it’s working fine with FF).
    Any idea ?
    Thanks a lot!

  • http://s29.com.au/ django

    nice work

  • http://picaseo.com niels

    im wondering how to make the first tab open by default? I thought I was one of the comments addressing this by adding a set width to a1, but this made the a1 a tag remain that width no matter what…I would like it to be open on the load of the page, then collapse if i open another tab..make sense?

  • http://www.jameswomack.com Murrieta Web Design

    Thanks for the nice work and the willingness to share!

  • Pingback: Fifth Flight

  • Pingback: JS?????? « ????

  • memphis

    The content on the Right accordion is not hidden in Firefox when I have an iframe inside it. How can i solve it?
    thanks!

  • Ted

    I had to put it in the head tag like this instead:

  • Pingback: Petite sélection de plugin JQuery | Le Blog de Kanon

  • Pingback: Accordion – Plugins, Demos and Tutorials - Hidden Pixels

  • http://blogs.kartika9.com Kartika Angkawijaya

    Wow! It’s so simple. Thanks for putting this into internet.. Like your work :)

  • Martin P

    Nice effect, but please don’t teach people to use wrong HTML-code.
    You are putting an anchor around block-level elements to get the cursor: pointer;, but you can get the same effect when you set the cursor at the . This keeps your HTML-code correct.

    Remove the and add this to your CSS
    li
    {
    cursor: pointer;
    }

  • Martin P

    Sorry for the message above, but the HTML-code seems to get removed from the message.
    Tip: http://www.php.net/htmlspecialchars ;)

    Nice effect, but please don’t teach people to use wrong HTML-code.
    You are putting an anchor around block-level elements to get the cursor: pointer;, but you can get the same effect when you set the cursor at the li. This keeps your HTML-code correct.

    Remove the anchor and add this to your CSS
    li
    {
    cursor: pointer;
    }

  • http://www.websitesare.us San Diego Web Design

    Argmpft….. after an hour of trying and ripping my hair out because it wouldn’t work, I finally figured out what was wrong…..

    So if anybody else is trying this in November 2009 – the little accordion script on this website (which is excellent BTW, many thanks!) uses jquery 1.2.3 but the link on this website above leads you to download the latest jquery version which is jquery 1.3.2-min…. it must be somehow different, as the accordion script doesn’t work anymore with the lastest version of jquery.js.

    But as soon as I downloaded your old 1.2.3 version which I found in your iframe link, everything worked like a charm.

    Again, awesome little script, thanks!

    So if anybody is still trying this, download the jquery.js this accordion script is using not the latest one the link leads you too…

  • Pingback: ???????8????? | ??????

  • Pingback: 8 Layout Solutions To Improve Your Designs | Gacik Design Blog

  • Ankit

    nice i like it

  • JO

    ARRGGH-GREAT

  • Daniel

    This is a cool effect. I tried and customized it for my needs and it worked great!!

    Thanks!

  • http://www.eroyun.com Oyun

    cok guzel basar?lar?n?z?n devam?n? d?ler?m s?temde uyguluycam thank you

  • http://www.chennaipage.com educational consultants chennai

    awesome. I would like to use in my site as well.

  • Pingback: Targeting Advanced Elements in jQuery « ryan ???

  • http://shazly.net Motaz

    the only thing is that this code is not complied with the W3C!!!!!!!!

  • Pingback: Démonstrations : Quatre Menu Accordéons en jQuery « FrameLinks

  • http://www.adelphadesign.co.uk AdelphaDesign

    Can this code be use as a mouseover/mounseout button effect rather than an accordion effect?

  • http://www.designerpk.com pakistan web design

    hi this is great work, same work I used in my some of sites thats developed in mootools but I cant develop this type of work in jquery because some where I need jquery and these both not work together * mootools and jquery ) this is the solution I’m looking many many thanks for sharing code it’s very helpful.

  • http://www.fpolitics.com/ Politics

    The code snippets in this article don’t reference the iframe at all.
    So please see iframe.

  • http://www.zarajans.com ajans

    nice i like it, thanks admin…

  • http://www.estudentaid.com/ student aid

    Thanks for helping in IQery.

  • http://www.blueprintdesigner.co.uk Blueprint Designers

    Best Jquery accordian I’ve seen to use on websites this year. Will be definatly using this for my projects thanks a million.

    http://www.blueprintdesigners.co.uk

  • Pingback: Amazing jQuery Accordions « anil's Blog

  • Pingback: 8??????????? | o??? -- W3C????????

  • http://www.chyra.dimgs.com Chyrus

    It’s great accordion!
    But doesn’t work under Opera 10.10 (Linux and Windows).

  • http://www.intandem.ie Carolin

    Thanks for the script! I am currently using it for a client site. However, I would love to be able to include some sort of image swap so that when the user rolls over an accordion and it expands the image swaps to something else and back again as soon as the user rolls over the next accordion. Am a newbie so any ideas welcome. Thanks!

  • http://www.webproinsite.com Mike

    Hello!

    Thanks for the post. I too am starting to lean on jquery for java-script… Though, I am wondering – do you have any experience with expanding an iFrame to act something like an accordion effect?

    I am searching to learn how to make the web page dim while the iFrame is called up and displays an accordion like expansion till it reaches the dimensions I give it…

    Any insight on this?

  • http://www.intandem.ie Carolin

    Hi guys, perhaps someone can help me. Testing this out for a client and all works fine in all browsers except IE. I have an image in each accordion in addition to the one at the left, but in IE it does not hide in the collapsed accordions but peeps through in the background. Any suggestions appreciated!

    http://www.celticpress.ie/modx

  • Pingback: ?????8??????? | TechTrack- ????

  • http://www.integerz.com pratap

    heyyyyyyyyyyyyyyyy… i found the solution for opera…
    The solution for opera problem is as follows:
    1. set width:0px; for inner tag
    2. set margin-top value in minus(depends on height) .

  • Pingback: The big list of website resources

  • Pingback: 8 Solutions To Improve Your Design Layout | Techy Minds

  • Dazy

    Hi, thank you so much for this great tutorial.

    I’m trying to implement this for my website. As I’m new to JQuery, so I’m facing an error.

    I have added this code to my contact.aspx page but its applying the javascript code to all the unordered lists present on the page.

    But I only want to apply this code on the unordered list present in the links div.

    Can anybody help how to modify the JavaScript code to only apply it on a particular list.

    Any help will be really appreciated.

    Regards,
    Dazy

  • http:://www.deoindia.com pratap

    Hi Dazy,
    you can give specific id to unordered list and change into the jquery hover function. In that add the unordered list id with anchor tag(e.g. #id a),
    also do minor changes in style sheet also (regarding ul with unordered list)..

  • Pingback: song-zone!

  • Pingback: ??????????

  • http://www.buildvoy.com London

    This is what I needed. Thanks!

  • Newbie

    I also want to change the image on hover. Any idea how to do this?

  • http://www.trybuch.com Elanio

    Awesome tut, and great plugin.

    Things I would like to see implemented in an upgrade:
    1. Active state i.e. if you are doing img rollover affects, have an active state. for example I use b&w img’s and change them to color when rollover happens. When you rollout it reverts to b&w
    2. keep link only on the img not the entire element.

    if anyone has a solution to the above 2, I am all ears.

    Thanks for the tut again, keep jQuering!

    Cheers!

  • http://www.wowalpha.com RAVI

    This is what I needed. Thanks!

  • http://webyabber.com/ Richard

    This is a very elegant way to set it up. Thanks for your post on this.

  • http://nerdpress.org Max

    very nice and clean solution – thanks a lot!

  • Pingback: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/ | Welcome to Designer

  • http://www.kareemkarawia.com kareem karawia

    Hi … it’s amazing for me but when i did it .. yeah it’s working but why the motion is so silly and flickering … i know it’s not something about the code but … i don’t know why … the only difference that i am using long pics 220*668 :D

  • http://www.db-elements.com DB-Elements

    One of the nicest examples of vertical accordion I’ve come across. Thanks.

  • http://www.syscom.com.mx Edwin Sandoval

    Great Job !!!

    Thanks a lot : )

  • http://www.wachstuch.com Finchen

    many thanks for this interesting topic

  • Pingback: Menu Acordeon horizontal jQuery « donatfombuena.com | blog

  • http://plohni-tv.blogspot.com Plohni-Fan

    I have read the report and find this interestingly written.

  • Johnathon Smyth

    Brilliant! Thanks for posting.

  • T

    This is great. However when I put an href inside the sentence the structure of the paragraph falls apart. Iv tried everything, any suggestions?

  • T

    Never mind, i sorted it. Changed the trigger to be the span instead of the a and swapped the css.

  • ELliott

    I can’t get the pictures to be hidden using div’s. The movement is right but the overflow is still showing up. Any ideas?

  • http://quady24.info/wypozyczalnie wynajem

    Nice tutorial.

  • Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples

  • http://www.topstyle.com.br/ Thiago

    Thanks for sharing, simple, practical, jQuery is a great option!

    []s

  • Pingback: 30 jQuery Accordion Menus, Tutorials And Best Examples » abdie.web.id

  • http://www.intandem.ie Carolin

    Got my problem discussed above sorted out. Here’s the finished result http://www.celticpress.ie where your script is used to resemble bookends for an online bookshop.

    Thanks for the great tutorial. It was exactly what I was looking for!

  • 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://www.rpgshow.com/ lace front wigs

    I loved the article. It is very exciting. Thank you for the information. I will be back.

  • Jul 15

    Very Nice .

    Arnold

  • http://www.watanpakistan.com Ibrahim

    Cool, nice tutorial.
    Thank you

  • http://www.artgraphix.de/ Webdesign Agentur

    thx, nice tutorial
    greetings from de

  • pratham dutta

    Thanks , Its nice jquery tutorials I am searching this type of tutorials always.Its really helpful for me

    httP://www.scrapsforever.com

  • Mark
  • http://www.lvnovo.com Replica Louis Vuitton bag

    It’s usefull for me, thank you!

  • João Piccino

    I got around the problem with the anchor so I am able to put links on the middle of accordion.

    On the CSS I used ul li div{ and #div1 instead of ul li a{ and #a1.

    On the script, this is the change:

    $(document).ready(function(){
    lastBlock = $(“#div1″); /* Originally “#a1″ instead of “#div1″ */
    maxWidth = 690;
    minWidth = 9;

    $(“ul li div”).click( /* originally “ul li a” instead of “ul li div” */
    function(){
    $(lastBlock).animate({width: minWidth+”px”}, { queue:false, duration:400 });
    $(this).animate({width: maxWidth+”px”}, { queue:false, duration:400});
    lastBlock = this;
    }
    );
    });

    On the HTML the structure to be used is:
    For the first bar is:

    content

  • http://www.7selahproductions.com larno

    that’s just I needed it!

  • Carla

    Hi. Nice accordion!!
    I’m just starting with jQuery, so i’m not sure about this, but is it possible to use short flash videos instead of images?
    Thanks!!

  • http://adibowo.com adibowo

    nice post bro :)

  • anotherarc

    It jitters just the same as every other horizontal accordion that uses animation to change the size of the element. Just look at your own demo to see it jitter. what’s needed is a really simple code that uses positioning – not this same old flawed technique again. Another solution could be to use jQuery to change the float on the list item from right to left (or visa versa) when you switch direction as the jitter is only a problem when you go in a contra direction to the float. But doing this with out changing the list order ….????

  • Jeff

    If you want to be able to toggle the accordion:

    lastBlock = $(“#a1″);
    maxWidth = 300;
    minWidth = 150;

    $(“.kid-picture”).click(
    function(){
    //$(this).animate({width: minWidth+”px”}, { queue:false, duration:400});
    if (lastBlock == this){
    $(this).animate({width: minWidth+”px”}, { queue:false, duration:400});
    lastBlock = “null”;
    }
    else {
    $(lastBlock).animate({width: minWidth+”px”}, { queue:false, duration:400 });
    $(this).animate({width: maxWidth+”px”}, { queue:false, duration:400});
    lastBlock = this;
    }
    }
    );

  • http://www.home-remedies.in Home Remedies

    Hey! Thanks for the resource for horizontal accordion.

  • http://www.amandadymond.com Amanda

    I’ll try to describe this as best I can,
    I’m using this code to make a gallery of my illustrations, so each “tab” is a sub section of my gallery.
    Inside the tabs, I want thumbnails of my work (that you can click and open into a full sized view, but i haven’t even gotten to this part yet, lol). Here is where I run into the problem. When you hover over a different tab then the one you are in, the images from the previous tab do not disapear (text will but not images).. how do I fix this?
    i hope that made sense

  • http://www.meditationroom.org poompah

    Re: Elanio April 8th

    An active state can be generated using the jQuery operators: addClass and removeClass, and a little css.

    NOTE: if you wish to change the image using css, then use the background property and remove it from the HTML code.
    Use image sprites to control by position (used for the active and non-active states in the css).
    To find out how to do this go to W3schools.com

    CSS
    Set your anchor tags to have a background image with position, for example:

    #a1 {background-image:url(‘images/sprite1.png’) 0 0 no-repeat;}
    #a2 {background-image:url(‘images/sprite2.png’) 0 0 no-repeat;}
    #a3 etc.

    Create a new class “active” and set the background position for the rollover/active image:

    ul li a.active {background-position:0 -75px;}

    NOTE: this obviously applies to an image that is 75px high, with a 150px high sprite :o )

    HTML
    For the default-open block (in this case #a1) set the class as active:

    your text

    This is the block that is open when the page loads, and shows in the active state.

    JAVASCRIPT
    You need to add two lines to the javascript code given with this tutorial. The position of these lines in the code is important!

    So using the javascript supplied here, modify it to read like this:

    $(document).ready(function(){
    lastBlock = $(“#a1″);
    maxWidth = 210;
    minWidth = 75;
    $(“ul li a”).hover(
    function(){
    $(lastBlock).animate({
    width: minWidth+”px”
    },{
    queue:false,
    duration:400
    });
    $(lastBlock).removeClass(‘active’);

    $(this).animate({
    width: maxWidth+”px”
    },{
    queue:false,
    duration:400
    });
    $(this).addClass(‘active’);
    lastBlock = this;
    }
    );
    });

    What this code does is, remove the “active” class from the old block and add it to the new one. And this works every time you mouseover a new block.

    Ah! the joy of jQuery :o )

    NOTE: you can also modify background colors this way too.

    Anyone using this trick – a link to my website would be appreciated ;o)

  • Pingback: jQuery Examples – Horizontal Accordion | CSSHunt showcasing best hunted web and logo designs - CSSHunt.com

  • Pingback: ???????8????? « ?????

  • http://www.mattpealing.co.uk/ Matt Pealing

    Loving this! But is it possible to use anchor tags within the paragraph element? It seems to move them outside of the element for me.

    I’ve even tried something the following in my js:

    $(“#icon li .accordion-anchor”).click(

    But somehow it still seems to interfere! If you have any idea why this is that would be great.

    Thanks again,
    Matt.

  • http://dmswebsites.com Local Web Design

    Just what I was looking for… Thank you!!!!

  • Mau

    Hello and thanx for sharing this code and accordion. I wonder if the subject was already discussed in the sea of comments above but, is it possible to have text in front of the images?

    Thanx!

  • Casper

    @João Piccino

    Your solution would be well recived, but your html is cut off by the editor.. Please come back and share the full version..with a cherry on top? ;-)

    Next: If you replace the thump with text AND rotate it 90 degrees everything goes CRASY! Any idea how to add vertical headlines instead of thumps?

    THANKS!

  • http://www.greensurfshop.com surf shop

    Such a great tutorial! It’s cool seeing an accordion that moves horizontally as well!

  • http://www.maxipcmarket.com ucuz web tasar?m

    web tasar?m thanks…

  • http://jacknumber.fr Jack NUMBER

    Really easy and really fun. THX !

  • Pingback: Accordéon horizontal de photos | ScreenFeed

  • ian

    I am new to the javascript stuff and I am having troubles adding any content and making it all work properly. I want to have a simple picture and then a heading and then some text. does anyone have any other examples that they used on there page when they put different content into the Accordion.

  • http://www.degisimbilisim.com balikesir web tasar?m

    very good useful sharing. thanks.

  • http://lxcblog.com/ LxC BLOG

    Hello,

    I have created and shared a JQuery Horizontal Slider.
    Check it out http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/
    Let me know if you like it.

    Thanks.

  • http://www.sanjib.org Sanjib

    One heck of a beautiful and elegant solution!
    Thanks for sharing.

  • http://www.joyoohairextensions.com wholesale hair extensions

    wholesale hair is really beautiful

  • http://www.joyoohairextensions.com wholesale hair extensions

    So if you have any demands in buying the hair products, you can contact us and we would like to answer you all the questions till you are satisfied.

  • http://www.sahibimolurmusun.com sahibinden

    Thank you first design to use the admin menu is a wonderful example of

  • http://www.webdevelopmentseo.com web Desingning

    this is such a great information for uis
    thanks you very much and hope that u will share more such like this to us
    thanks

  • Preetham

    Thank you very much for sharing this, it’s mind blowing…. i will start using it… :)

  • http://www.mediatronics.co.in kapil

    This jQuery example is very good and useful for new designers

    thanks

  • http://nicolahibbert.com Nikki

    Hi everyone,

    I created a horizontal accordion plugin for jQuery. It looks pretty neat – it makes good use of CSS3 – but it’s designed to be lightweight, so it doesn’t use any background images. You can find it here: http://nicolahibbert.com/demo/liteAccordion/

    Thanks!

  • http://www.findingdream.com wholesale hair extensions

    I want to have a simple picture and then a heading and then some text. does anyone have any other examples that they used on there page when they put different content into the Accordion

  • http://fastandswift.clubos.net Borj

    Hi,

    Really nice work! This is what I’m looking for.
    just a question, how can I make this auto slide every let say 4 secs? thanks.

  • Pingback: jquery??slidshow??

  • http://www.findingdream.com wholesale hair extensions

    The ones that I’m watching are the Wind and Acer. These are the only two names that could make a decent product. Intel options look awful, and although the Medion sounds interesting, I don’t want to end up with a laptop that only 2 people have and with no support.

    saab_rider

  • http://clipovo.ru/ Adele

    This is a very elegant way to set it up. Thanks for your post on this.

  • Pingback: jQuery Examples – Horizontal Accordion | Design Reviver - dhansson - dhansson

  • http://www.bhusan.com.np Bhusan Shrestha

    I guess it’s not working well in Opera..

  • http://aioazech.net Aioazech

    This is pretty great, however I’ve been having a great deal of trouble keeping the slides from popping out of the div that is containing the accordion, on refresh. Eventually, it fixes itself, but the first scroll over throws the last slide way out of the div. Does anyone have a fix for this?

  • http://www.trucs.eu Trucs

    Tank you for this jQuery Examples – Horizontal Accordion

  • Pingback: jQuery Accordion Menus, Tutorials And Examples « Swadesh's Technology Blog

  • http://www.gasafetycertificate.co.uk/ Gas Safety Certificate

    Nice tutorial but still having some issues with wrap and fonts. This kind of tutorial really helps though

  • http://www.infocareer9.blogspot.com career development strategy

    Hey! Thanks for the resource for horizontal accordion.This is a very elegant way to set it up

  • http://www.spiralteck.com webb

    Where is the sample?

  • http://www.hprenew.bg Dimi

    Where i can see the demo on this menu

  • http://mintik.com/ mintik

    Thank you for accordion example.

  • Pingback: 30 jQuery Accordion menus, tutorials and classical case Web Page Design | Web Page Design Templates | Html5 Template

  • http://www.dcointernet.co.uk/ SEO Liverpool

    thanks for the detailed information, I’ve implemented the accordian on my latest web design with your help and it works great.

  • Anthony

    great post keep up the good work

    http://juegosdeterrorpc.com/silent-hill-para-pc