title: Making a Custom accordion jQuery
body: <p>I am making a custom accordion. My problem is I don't know how to <code>slideUp</code> the div that is being <code>slideDown</code> once I click on the other header with there div is not yet being <code>slideDown</code>.</p>
  
  <p>Here is my code:</p>
  
  <p>CSS:</p>
  
  <pre><code>.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
  .header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
  .level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
  .box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="grid-l1"&gt;
      &lt;div class="box-a1"&gt;
          &lt;h2 class="header"&gt;
            Header
          &lt;/h2&gt;   
  
          &lt;div class="level-box"&gt;
            &lt;label&gt;Test Input&lt;/label&gt;
            &lt;input type="text"&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- box-a1 --&gt;
      &lt;div class="box-a1"&gt;
          &lt;h2 class="header"&gt;
            Header 2
          &lt;/h2&gt;   
  
          &lt;div class="level-box"&gt;
            &lt;label&gt;Test Input&lt;/label&gt;
            &lt;input type="text"&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- box-a1 --&gt;
      &lt;div class="box-a1"&gt;
          &lt;h2 class="header"&gt;
            Header 3
          &lt;/h2&gt;   
  
          &lt;div class="level-box"&gt;
            &lt;label&gt;Test Input&lt;/label&gt;
            &lt;input type="text"&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- box-a1 --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('body').on('click', '.header', function() {
      $(this).closest('.box-a1').find('.level-box').slideToggle();
  });
  </code></pre>
  
  <p>Should I use <code>slideToggle</code> ? I will appreciate every responds you guys will be making. And feel free to teach me, I'm still a newbie in jQuery world :) Thanks a lot Sir.</p>