Making A Custom Accordion JQuery

I am making a custom accordion. My problem is I don't know how to slideUp the div that is being slideDown once I click on the other header with there div is not yet being slideDown

Solution 1:

Try this

$('body').on('click', '.header', function(e) {
    $('.box-a1').find('.level-box').stop().slideUp();
    $(this).closest('.box-a1').find('.level-box').stop().slideToggle();
});

.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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grid-l1">
    <div class="box-a1">
        <h2 class="header">
          Header
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 2
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 3
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
</div>

Solution 2:

You can use .siblings() to slide up the other boxes:

$('body').on('click', '.header', function() {
    var $box = $(this).closest('.box-a1');
    $box.siblings().find('.level-box').stop().slideUp();
    $box.find('.level-box').stop().slideToggle();
});

As @ScottSelby points out in a comment, the animations should be stopped with .stop() before staring new ones. The user would have to click fast, but animations on the same element queue up if they are not stopped.

jsfiddle

Solution 3:

You can just slideUp all the level box at initial start. And slideDown active element that was clicked.

$('body').on('click', '.header', function() {
  $('.level-box').slideUp();
  var current = $(this).closest('.box-a1').find('.level-box');
  if (current.is(':visible')) {
    current.slideUp();
  } else {
    current.slideDown();
  }
});

DEMO