jQuery Horizontal Accordion - "play" on the accordion

In this example, I will show how to create an "accordion effect" that can be used for both menus and any other purposes. Previously, Flash was used for these purposes, but now you can use jQuery.



To use jQuery on your site, you must first download the latest version of this javascript library, and then connect it to your page.

Now let me introduce the html code for this example. I pointed to the first link id so that we could set the initial width and make it appear open when the page loads.

 <ul> <li> <a id="a1"><img src="habr.gif" /> <span><strong></strong><br/>   .</span></a> </li> <li> <a><img src="tut_thumb.jpg" /> <span><strong>jQuery</strong><br/> JavaScript-,    JavaScript  HTML. </span></a> </li> <li> <a> <img src="firefox.png" /> <span><strong>Firefox</strong><br/>  ,   . </span></a> </li> </ul> 

')
Add styles, it's all very simple.
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 span{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}

And here is the jQuery script that makes it all work. It can be placed between tags.
$(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;
}
);
});

First, we set several variables:
lastBlock represents a block that has already been opened,
maxWidth is the width we want to set for the block when it is expanded,
minWidth - width of the folded block.
Then we simply hang the function on the hover event for all the links contained within all list items. Here we call the animate () function twice: the first time to close the lastBlock, and another time to uncover the block to which we hover the mouse. Then we set the lastBlock equal to the block we just opened. This is so that jQuery “knows” which block to close next time. The animate () function allows you to create different animations by setting different values ​​for different properties, but in this case we only “animate” the width.
Learn more about the functions animate () you can read in the official documentation .

Example

PS Unfortunately, the example on the website of the author in the Opera does not work, but I fixed it myself. I hope someone come in handy. :)