javascript - jquery accordion collapse on new tab open -

im trying make accordion collapse on click on next tab, having problems. believe code correct, tabs open. if click on tab 2 tab 1 remains open.

also arrows not pointing down if tab open.

html

<ul class="aside-nav d-all grey-border ">             <li class="aside-open-close active">                 <a class="aside-opener" href="#">tab1</a>                 <div class="slide">                     content                 </div>             </li>             <li class="aside-open-close ">                 <a class="aside-opener" href="#">tab2</a>                 <div class="slide">                     content                 </div>             </li>             <li class="aside-open-close ">                 <a class="aside-opener" href="#">tab3</a>                 <div class="slide">                     content                 </div>             </li>         </ul> 

jquery

    // open-close init function initopenclose() {     jquery('.open-close, .aside-open-close').openclose({         activeclass: 'active',         opener: '.opener, .aside-opener',         slider: '.slide',         animspeed: 400,         effect: 'slide'     });     jquery('.nav').openclose({         activeclass: 'active',         opener: '.nav-opener',         slider: '.nav-slide',         animspeed: 400,         effect: 'slide'     });      jquery('#nav .drop').each(function(){         var holder = jquery(this);         var opener = holder.children('a');         var drop = holder.children('.drop-holder');          opener.on('click', function(e){             e.preventdefault();             holder.toggleclass('hover');         });          jquery('body').on('click', function(e){             if(holder.hasclass('hover') && !jquery(e.target).closest(holder).length) holder.removeclass('hover')         });     }); } 

if set [ul] tag accordion works fine

adding this

$('.aside-nav').accordion(); 

working fiddle