jquery realizes accordion effect _jquery

This example describes the code for the accordion effect of jquery. Share to everyone for your reference. Specifically as follows:

The effect process is when the mouse over the picture, the width of the picture, the other brothers picture width smaller, the effect is as follows:

The specific code is as follows

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

  CSS code:

@charset "Utf-8";
*{margin:0px;padding:0px;font-family: "Microsoft Ya hei"; font-size:12px; text-decoration:none;list-style-type:none;} img{border:0px}//* Start//flash4{width:1180px;height:450px;margin:0pxauto;margin-bottom:20px;position:relative. Flash4 ul li{width:106px;height:450px;border-left:1px solid #000;p osition:relative;overflow:hidden;float:left; Flash4 ul Li Imgtop img{opacity:0.4; Flash4 ul Li. imgtop img.tm{opacity:1; Flash4 ul Li. imgcon{width:538px;height:4
05px;} . Flash4 ul Li Imgcen{width:538px;height:50px;background:rgba (0,0,0,0.5); color: #fff; font-size:20px;line-height
: 50px;position:absolute;left:0px;bottom:45px;text-indent:20px;display:none;} . Flash4 ul Li Imgbot{width:538px;height:45px;background: #222; Flash4 ul li. Imgbot p.bt_1{width:80px;line-height
: 45px;font-size:16px;color: #fff; text-indent:20px;float:left;} . flash4 ul Li Imgbot p.bt_2{width:458px;height:45px;line-height:45px;float:left;display:none. Flash4 ul li. ImgBot P.bt_2 Span{font-size:14px;color: #fff;p ADDing-right:30px;background:url (..
/images/part2_icon.png) no-repeat left center;padding-left:10px;} . flash4 ul li.first{width:538px; Flash4 ul li.last{position:absolute;right:0px;bottom:0px;}

jquery Code:

Accordion animation effect
var index7 =0;//define variable, assign value to 0;
$ (". Flash4 ul li"). MouseEnter (function () {
index7 = $ (this). index ();
$ (this). Stop (). Animate ({
width:538
},500). Siblings ("Li"). Stop (). Animate ({
width:106
},500);
$ (". Imgcen"). EQ (index7). CSS ("Display", "block"). Siblings (". Imgcen"). CSS ("display", "none");
$ ("p.bt_2"). EQ (index7). CSS ("Display", "block"). Siblings ("P.bt_2"). CSS ("display", "none");
$ (". Imgtop img"). EQ (index7). addclass ("TM"). Siblings (". Imgtop img"). Removeclass ("TM");
$ (". Flash4 ul li"). MouseLeave (function () {
$ (this). EQ (index7). Stop (). Animate ({
width:538
},500);
$ (". Imgcen"). CSS ("display", "none");
$ ("p.bt_2"). CSS ("display", "none");

SOURCE Download:jquery to achieve the accordion effect

I hope you will enjoy sharing the jquery accordion effect.