Simple jquery horizontal accordion

有时候需要的功能很简单,不需要动不动就几千行的插件,就像这个水平手风琴效果。

html code

  • Freebies
    Download free files to make your job easier.

  • Tutorials
    Tips and tricks to help you keep up with the latest technology.

  • Inspiration
    Get inspired by what other designers are doing.

  • Inspiration
    Get inspired by what other designers are doing.

css dode

#horizontal_accordion{   list-style: none;   margin: 0 0 0 -2px;   padding: 0;   background:#dedede;   height:auto;  width:664px;   display:block;   height:115px; border:1px solid #c5c5c5; border-right:none;  }

#horizontal_accordion li{ overflow: hidden;   width: 109px; height:115px; padding:0; float: left;   display: block;    list-style:none;  background:none;   border-right:1px solid #c5c5c5;}
 
#horizontal_accordion .eightdgift { background:url(../images/8dgif.png) #dbdbdb no-repeat;}
#horizontal_accordion .currnet { width: 333px; background-position: 0 -115px; background-color:#fff;}

#horizontal_accordion li p{   margin: 0;   padding: 20px 20px 20px 130px;   display: block;}

javascript code