Accordion folding Menu effect with JavaScript implementation

Demo Address: Http://codepen.io/anon/pen/pJERMq

Implementation results:

HTML code:

<! DOCTYPE html>
CSS code:
/** by @Kevin happy times *2015/5/21*/*{     margin:0;padding:0;     }     ul,li{      list-style:none;      }    . main{    width:300px;    Color: #666;    Position:absolute;    top:0;    right:0;    bottom:0;    left:0;    Margin:auto;     }    . Main ul Li ul{    display:none;    padding:15px;    Background-color: #ecf0f1;    }    #expand Li ul li {  padding:5px 0;  border-bottom:1px dotted #999;}. h3-common{  font-size:15px;   Color: #fff;   padding:5px 22px;   border-bottom:1px dotted #e7e7e7;}    . Main h3{         Background:url (http://www.iconfont.cn/uploads/fonts/font-155705-.png?color=ecf0f1&size=20) No-repeat #00bb9c left center;    }    . Main h3.active{      Background:url (http://www.iconfont.cn/uploads/fonts/font-69084-.png?color=ecf0f1&size= No-repeat #ea8010 left center;    }    . li_active{    background-color: #56abe4;    Color: #fff;    Text-align:center;    border-radius:3px;    }
JavaScript code:
  var Oexpand=document.getelementbyid (' expand ');  var ah3=oexpand.getelementsbytagname (' H3 ');  var aul=oexpand.getelementsbytagname (' ul ');  var ali=null; var arrli=[];for (var i=0;i<ah3.length;i++) {ah3[i].index=i;ah3[i].onclick=function () {var current_num=this.index ;//Add custom index value for (var i=0;i<aul.length;i++) {//not selected UL folded up if (ah3[i]! = this) {ah3[            I].classname= "H3-common";        Aul[i].style.display= "None"; }}//Expand, Close if (!ah3[current_num].classlist.contains (' active ')) {AH3[CURRENT_NUM].CLASSLIST.A DD (' active '); aul[current_num].style.display= ' block ';} Else{ah3[current_num].classlist.remove (' active '); aul[current_num].style.display= ' None ';}}}  Add an array for (Var i=0;i<aul.length;i++) {aLi =aul[i].getelementsbytagname (' Li ');  for (Var j=0;j<ali.length;j++) {Arrli.push (ali[j]); }}for (var i=0;i<arrli.length;i++) {arrli[i].onclick=function () {//Initialize other lifor (Var i=0;i<arrli.length;i++) {i F (Arrli[i]!=this) {arrli[i].classname= ';}} Click on the element itself to select, then click to disappear; Li_active is the state if selected (!this.classlist.contains (' li_active ')} {this.classList.add (' li_active ');}  Else{this.classlist.remove (' Li_active ')}}}
　　
Accordion folding Menu effect with JavaScript implementation