title: Accordion Menu in Asp.net Mvc4
body: <p>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.</p>
  
  <p><a href="http://i.stack.imgur.com/qhm3T.png" rel="nofollow">Menu</a></p>
  
  <pre><code>&lt;div class="box-content box-category"&gt;
            &lt;ul id="main"&gt;
                @foreach (var kategori in Model.kategoriler)
                {
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;@kategori.KategoriAd&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                    @foreach (var altkat in kategori.AltKategoriler)
                    {
  
                          &lt;li&gt; &lt;a href="grid.html"&gt;@altkat.AltKategoriAd&lt;/a&gt;                                             
                          &lt;/li&gt;  
                    }                                           
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                }                    
            &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Source Code:</p>
  
  <pre><code>&lt;div class="box-content box-category"&gt;
            &lt;ul id="main"&gt;
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Kalemler&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Jel Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Boya Kalemleri&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Kurşun Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Dolma Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;T&amp;#252;kenmez Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Fosfoslu Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Pilot  Kalemler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Defterler&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Orta Boy Defterler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;K&amp;#252;&amp;#231;&amp;#252;k Boy Defterler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;B&amp;#252;y&amp;#252;k Boy Defterler&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Okul Defterleri&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;G&amp;#252;nl&amp;#252;k ve Ajandalar&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Seyahat Defterleri&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Tarif Defterleri&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Baskılar&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Kalpli Baskı&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Vintage Baskı&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Saatli Baskı&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Kalem Kutuları&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;&amp;#199;ıt&amp;#231;ıtlı Meyveli Kalem Kutusu&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Deri &amp;#199;i&amp;#231;ekli Kalem Kutusu&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Aksesuarlar&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Paper Doll Bozuk Para C&amp;#252;zdanı&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;&amp;#199;izgili Bozuk Deri Para C&amp;#252;zdanı&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Hesap Makinesi&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Hesap Makinesi&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Dekorasyon&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Minyat&amp;#252;r Banklar&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;M&amp;#252;zik Kutuları&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Kapı S&amp;#252;sleri&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Bantlar&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Aynalar&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Metal Kutular&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Mini Metal Kutular&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;&amp;#199;i&amp;#231;ekli Metal Kutular&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
                    &lt;li&gt; &lt;a class="active" href="grid.html"&gt;Ivır Zıvırlar&lt;/a&gt; &lt;span class="subDropdown plus" id="btnPlus"&gt;&lt;/span&gt;
                &lt;div &gt;
                        &lt;ul class="level0_415" style="display:none" id="subcats"&gt;             
                         &lt;!--level1--&gt;
                          &lt;li&gt; &lt;a href="grid.html"&gt;Mandallar&lt;/a&gt;                  
                            &lt;!--level1--&gt; 
                          &lt;/li&gt;  
                &lt;/ul&gt;  
                    &lt;/div&gt;         
              &lt;/li&gt;    
            &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>