selow February 2016

Accordion Menu in Asp.net Mvc4

I am using a template for my project. I have an accordion menu in this template, but it is not ready to use(not slidingup or down). How can I make it slideup and down on click ? Here are my codes and a screenshot from my menu. I am giving the html source code too.

Menu

<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-->
                            

Answers


selow February 2016

I solved the problem, here is my 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;
  });});

Post Status

Asked in February 2016
Viewed 3,627 times
Voted 10
Answered 1 times

Search




Leave an answer