Themeforest

jQuery Simple Horizontal Accordion

After our tutorial last month showing how to create a vertical accordion menu using jQuery we have had a couple of requests asking how to make a horizontal accordion.

So we have decided to provide the following post, which shows very easily how to use the power of jQuery to create a rather nice horizontal accordion effect.

1. The HTML

First we create an unordered HTML list with id=”accordion” and include some content in each of the li tags – since the accordion is horizontal we have decided to use images to create the section labels:

<ul id="accordion">
      <li>
        <img src="images/section_1.png" />
        <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_2.png" />
        <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_3.png" />
        <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_4.png" />
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
    </li>
  </ul>

2. Style The Accordion

Next we add a few CSS rules, which will help style the accordion and its content:

#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}

#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}

The main items to take note of here are the widths of the li elements, which need to be the same as the min-width setting in our jQuery below and the width of the “active” tag, which should equal the max-width of the accordion section.

The “#accordion li.active” is also required to ensure that the default section is open when the page loads.

The rest is mainly styling of the background, text and positioning of the section header images.

3. The jQuery Code

Finally the jQuery to create the horizontal accordion effect – in this example we have used the “hover” event to trigger the animation:

$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

	$("#accordion li").hover(function(){
		$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
		$(this).animate({width: "450px"}, {duration:300, queue:false});
		activeItem = this;
	});

});

You can change which is the default open section upon page load by changing the “activeItem” variable – in our example we have used “#accordion li:first” to select the first list item.

Other options that can be changed include the min-width (in this case 50px) and the max-width, which we have set to 445px – the values in these lines must match the values given in the CSS rules above.

The duration setting controls the time in milliseconds for the accordion to animate from minimum to maximum width – again these can be set according to your preference.

The queue:false is required to stop the accordion capturing every hover event and continuing to animate after the mouse has left the hover area.

View the jQuery horizontal accordion demo

49 Comments

  • This is not displaying correctly for me. Do I need a jquery file other than the code that goes in the head? The color and text are visible, but I don’t have the image and it is not working with the mouseover effect. I hope I can get it working because I love the way it looks!

    • Hi

      Make sure that you also include the jQuery library before you add the jquery code. Apart from that the code in the tutorial is all that is required to create the demo horizontal accordion

  • I’m having an issue with the sliders first active item. I want it to automatically display information on page load, but it keeps making me hover over it first before it will show the first active item… is there a way around this?

    • Hi,

      Make sure that you have the first 2 lines of jQuery:

      activeItem = $("#h-accordion li:first");
      $(activeItem).addClass('active');
      

      and the CSS rule:

      #h-accordion li.active {
      width: 450px;
      }

      If the above code is included then the accordion should automatically open the first panel on page load

      • hmm, that didnt work… maybe you can take a look at what I’m working with.

        http://www.icodeinpink.com/valleyvision

        • Hi,

          You need to change the selector to match your accordion.

          Change:

          activeItem = $("#h-accordion li:last");
          

          To:

          activeItem = $("#accordion li:last");
          
          • I guess I might just keep playing with it. I had it that way to begin with and just switched it back with no luck. It does its job at showing the item first, but its what surrounded by the tag that is not showing until it is clicked on (was hover, but just switched it up).

            Thanks though!

          • by the li tag