Accordion effects in JavaScript

<! DOCTYPE html>ul {List-Style:none}*{margin:0; padding:0;            } div {width:1150px;            height:400px;            margin:50px Auto;            border:1px solid red;        Overflow:hidden;            } div li {width:240px;            height:400px; float: Left; /*Background-image:url (images/1.jpg);*/} div ul {width:1300px; }    </style>//Find someone    varbox = document.getElementById ("box"); varUL = Box.children[0]; varLis =Ul.children; //looping through the LIS binding background map     for(vari = 0; i < lis.length; i++) {Lis[i].style.backgroundimage= "url (images/" + (i + 1) + ". jpg"); //To each Li registered mouse after the event mouse after the exclusiveLis[i].onmouseover =function () {            //kill everyone and let everyone's width gradually change to             for(varj = 0; J < Lis.length; J + +) {animate (Lis[j], {"width": 100}); }            //leaving me to make my width gradually becomeAnimate This, {"width": 800});    }; }    //Mouse away from box all Li widths are gradually changed toBox.onmouseout =function () {         for(vari = 0; i < lis.length; i++) {animate (Lis[i], {"Width": 240});    }    }; functionAnimate (obj, JSON) {clearinterval (Obj.timer); Obj.timer= SetInterval (function () {            //Let's assume that all the properties have reached the target at the end of the execution.            varFlag =true;  for(varKinchJSON) {                varLeader = parseint (GetStyle (obj, k)) | | 0; vartarget =Json[k]; varStep = (Target-leader)/10; Step= step > 0?Math.ceil (STEP): Math.floor (step); Leader= leader +step; OBJ.STYLE[K]= leader + "px"; //if (leader = = = target) {                //clearinterval (obj.timer);                //}Console.log ("code is still running"); if(Leader! =target) {Flag=false;//tells the tag that the current attribute is not yet reached                }            }            //if it's still true at this point, it really does get to the            if(flag) {clearinterval (Obj.timer); }        }, 15); }    //all properties reach target value to clear    functionGetStyle (obj, attr) {if(window.getComputedStyle) {returnwindow.getComputedStyle (obj,NULL) [attr]; } Else {            returnObj.currentstyle[attr]; }    }</script></body>
Accordion effects in JavaScript