title: jQuery firing parent functions before children (slideUp and slideDown)
body: <p>In short, I have a 2 main links (Private Car and Commercial Vehicle) each with a specific class attached to their <strong>anchor</strong> tags. The same class names are used on the li tags of a second <strong>sublink ul</strong> to match them with to two top links. The idea is that each time a main link is clicked, the following happens:</p>
  
  <ol>
  <li>The <strong>sublink ul</strong> slides up</li>
  <li>All the li's inside are hidden</li>
  <li>The li's with the corresponding main link class are shown</li>
  <li>The sublink ul slides down showing only the correct li's</li>
  </ol>
  
  <p>Unfortunately that is not the order that the functions fire in. What happens is this:</p>
  
  <ol>
  <li>The sublink ul slides up</li>
  <li>The sublink ul slides down</li>
  <li>All list elements inside are hidden</li>
  <li>The relevant list elements slide down</li>
  </ol>
  
  <p>Any idea on how I can get the order to fire as I want it?</p>
  
  <p>Here is the code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.insurer ul.toplinks a').click(function(e) {
    e.preventDefault();
    var sublinkCategory = $(this).attr('class'),
      subLinksToShow = $(this).parent().parent().parent().find('li.' + sublinkCategory),
      subLinksList = $(this).parent().parent().parent().find('ul.sublinks'),
      allLinks = $(subLinksList).find('li');
  
    // First time
    if ($(subLinksList).is(":hidden")) {
      $(subLinksToShow).slideDown();
      $(subLinksList).slideDown();
      // List visible but new links invisible  
    } else if ($(subLinksList).is(":visible") &amp;&amp; $(subLinksToShow).is(":hidden")) {
      $(subLinksList).slideUp(function() {
        $(allLinks).hide(function() {
          $(subLinksList).slideDown(function() {
            $(subLinksToShow).slideDown();
          });
        });
      });
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="toplinks"&gt;
    &lt;li&gt;&lt;a href="#" class="privatecar"&gt;Private Car&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="commercialvehicle"&gt;Commercial Vehicle&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="sublinks"&gt;
    &lt;li class="privatecar"&gt;&lt;a href="private/key-facts.pdf"&gt;Key Facts&lt;/a&gt;&lt;/li&gt;
    &lt;li class="privatecar"&gt;&lt;a href="private/policy-wording.pdf"&gt;Policy Wording&lt;/a&gt;&lt;/li&gt;
    &lt;li class="commercialvehicle"&gt;&lt;a href="commercial/key-facts.pdf"&gt;Key Facts&lt;/a&gt;&lt;/li&gt;
    &lt;li class="commercialvehicle"&gt;&lt;a href="commercial/policy-wording.pdf"&gt;Policy Wording&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>