jquery - Accordion Menu in Asp.net Mvc4 -
i using template project. have accordion menu in template, not ready use(not slidingup or down). how can make slideup , down on click ? here codes , screenshot menu. giving html source code too.
<div class="box-content box-category"> <ul id="main"> @foreach (var kategori in model.kategoriler) { <li> <a class="active" href="grid.html">@kategori.kategoriad</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> @foreach (var altkat in kategori.altkategoriler) { <li> <a href="grid.html">@altkat.altkategoriad</a> </li> } </ul> </div> </li> } </ul> </div> source code:
<div class="box-content box-category"> <ul id="main"> <li> <a class="active" href="grid.html">kalemler</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">jel kalemler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">boya kalemleri</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">kurşun kalemler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">dolma kalemler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">tükenmez kalemler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">fosfoslu kalemler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">pilot kalemler</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">defterler</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">orta boy defterler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">küçük boy defterler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">büyük boy defterler</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">okul defterleri</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">günlük ve ajandalar</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">seyahat defterleri</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">tarif defterleri</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">baskılar</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">kalpli baskı</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">vintage baskı</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">saatli baskı</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">kalem kutuları</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">Çıtçıtlı meyveli kalem kutusu</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">deri Çiçekli kalem kutusu</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">aksesuarlar</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">paper doll bozuk para cüzdanı</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">Çizgili bozuk deri para cüzdanı</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">hesap makinesi</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">hesap makinesi</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">dekorasyon</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">minyatür banklar</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">müzik kutuları</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">kapı süsleri</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">bantlar</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">aynalar</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">metal kutular</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">mini metal kutular</a> <!--level1--> </li> <!--level1--> <li> <a href="grid.html">Çiçekli metal kutular</a> <!--level1--> </li> </ul> </div> </li> <li> <a class="active" href="grid.html">ivır zıvırlar</a> <span class="subdropdown plus" id="btnplus"></span> <div > <ul class="level0_415" style="display:none" id="subcats"> <!--level1--> <li> <a href="grid.html">mandallar</a> <!--level1--> </li> </ul> </div> </li> </ul> </div>
i solved problem, here solution.
$(document).ready(function () { var panels = $('#main > li > ul').hide(); $('#main > li > span').click(function () { var $this = $(this); panels.slideup(); $('#main > li > span').not($this).removeclass('subdropdown minus'); $('#main > li > span').not($this).addclass('subdropdown plus'); $this.next().toggle(); $this.toggleclass('subdropdown plus').toggleclass('subdropdown minus'); return false; });});
Comments
Post a Comment