title: How to sort elements and position with jquery
body: <p>How can I make the elements animate from top to bottom regardless of which item is clicked first, or the order to which the buttons are clicked? </p>
  
  <p>For example, an output like (below), but still maintains the entrance animation and closing functionalities of the snippet.</p>
  
  <ol>
  <li><code>Fourth</code></li>
  <li><code>Second</code></li>
  <li><code>First</code></li>
  <li><code>Third</code></li>
  </ol>
  
  <p><strong>JQuery (<a href="https://jsfiddle.net/kfnyn908/9/" rel="nofollow">FIDDLE</a>):</strong></p>
  
  <pre><code>$(document).ready(function() {
    //ENTRANCE
    $("#first").css("top", -1000);
    $("#1st").on('click', function() {
    setTimeout(function() {
      $("#first").animate({
        top: 10
      }, 400);
    }, 200);
      });
  
    $("#second").css("top", -1000);
    $("#2nd").on('click', function() {
    setTimeout(function() {
      $("#second").animate({
        top: 10 + 45 + 15
      }, 400);
    }, 400);
      });
  
    $("#third").css("top", -1000);
    $("#3rd").on('click', function() {
    setTimeout(function() {
      $("#third").animate({
        top: 10 + 45 + 45 + 30
      }, 400);
    }, 600);
  });
  
    $("#four").css("top", -1000);
    $("#4th").on('click', function() {
    setTimeout(function() {
      $("#four").animate({
        top: 10 + 45 + 45 + 45 + 45
      }, 400);
    }, 800);
  });
    //EXIT
    var elements = $('.menu');
    elements.on('click', function() {
      $(this).toggle();
      var nextEleemnts = $(this).nextAll('.menu');
      for (var i = 0; i &lt; nextEleemnts.length; i++) {
        var topPos = $(nextEleemnts[i]).position().top - 60;
        $(nextEleemnts[i]).animate({
          top: topPos
        }, 400);
      }
    });
    $('#four').on('click', function() {
      window.location.reload();
    });
  
  });
  </code></pre>