Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Accordion</title> <Linkhref= "Css/accordion.css"rel= "stylesheet"> <Scriptsrc= "Js/jquery-1.11.1.min.js"></Script> <Scriptsrc= "Js/accordion.js"></Script> <Script> $(function(){ //Application of Plugins $("#ul1"). accordion (); }); </Script></Head><Body><ulID= "UL1"> <Li>111111111<span>First piece</span></Li> <Li>22222222222<span>Second block</span></Li> <Li>33333333333<span>Third piece</span></Li> <Li>444444444<span>Block four.</span></Li> <Li>555555555<span>Fifth block</span></Li></ul></Body></HTML>View Code
JS section
/** * Created by Iecy on 14-9-5. * Accordion Plugin*/;(function($) {$.fn.extend ({accordion:function(options) {varDefaults ={width:"800px", Spanwidth:20, Hidewidth:700 }; varOptions =$.extend (defaults,options); varobj = $ ( This);//Current Object varObj_children = Obj.children ();//children under current object (first level) varObj_childern_len = Obj_children.length;//Number of children varAleft = []; Obj_children.each (function(){ varIndex = $ ( This). index (); $( This). css ({zindex:obj_childern_len-index,left:options.spanwidth*index+ "px"});//Initialize individual Li levels and locationsAleft[index] = $ ( This). Position (). Left;//Save the position of each accordion key }); Obj_children.mouseover (function(){ varIndex = $ ( This). index (); Obj_children.each (function(){ if($( This). Index () <index) {Obj_children.eq ($ ( This). Index ()). Stop (). Animate ({left:aleft[$ ( This). Index ()]-options.hidewidth+ "px"}); }Else{obj_children.eq ($ ( This). Index ()). Stop (). Animate ({left:aleft[$ ( This). Index ()]+ ' px '}); } }); }); } });}) (jQuery);View Code
CSS Section
* {margin:0;padding:0;List-style:None;}/*unfold: 720px close up: 20px*/#ul1{width:800px;Height:400px;Border:1px solid Red;margin:10px Auto;position:relative;Overflow:Hidden;}#ul1 Li{width:720px;Height:400px;background:#CCC;position:Absolute;}#ul1 Li Span{position:Absolute;Top:0; Right:0;background:#C66;width:18px;Height:398px;Border:1px solid Black;Color: White;text-align:Center;}View Code
Personal practice, passing by IS possible.
jquery Learning Plugin accordion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
