Simple jquery horizontal accordion

Posted on by

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

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