jQuery Simple Horizontal Accordion

From: http://www.designchemical.com/blog/index.php/jquery/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

posted @ 2012-02-29 21:37  Lux.Y  阅读(692)  评论(0)    收藏  举报