javascriptjqueryhtmlslidedownslideup

jQuery firing parent functions before children (slideUp and slideDown)

In short, I have a 2 main links (Private Car and Commercial Vehicle) each with a specific class attached to their anchor tags. The same class names are used on the li tags of a second sublink ul to match them with to two top links. The idea is that each time a main link is clicked, the following happens:

  1. The sublink ul slides up
  2. All the li's inside are hidden
  3. The li's with the corresponding main link class are shown
  4. The sublink ul slides down showing only the correct li's

Unfortunately that is not the order that the functions fire in. What happens is this:

  1. The sublink ul slides up
  2. The sublink ul slides down
  3. All list elements inside are hidden
  4. The relevant list elements slide down

Any idea on how I can get the order to fire as I want it?

Here is the 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") && $(subLinksToShow).is(":hidden")) {
    $(subLinksList).slideUp(function() {
      $(allLinks).hide(function() {
        $(subLinksList).slideDown(function() {
          $(subLinksToShow).slideDown();
        });
      });
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
  <li><a href="#" class="privatecar">Private Car</a></li>
  <li><a href="#" class="commercialvehicle">Commercial Vehicle</a></li>
</ul>
<ul class="sublinks">
  <li class="privatecar"><a href="private/key-facts.pdf">Key Facts</a></li>
  <li class="privatecar"><a href="private/policy-wording.pdf">Policy Wording</a></li>
  <li class="commercialvehicle"><a href="commercial/key-facts.pdf">Key Facts</a></li>
  <li class="commercialvehicle"><a href="commercial/policy-wording.pdf">Policy Wording</a></li>
</ul>

Solution

  • Your code isn't working while we don't have the fully code.

    This works, note the comments in the code to see what happens on the line under the comment.

    $(function() {
  // hide by default
  $('.sublinks').hide();
  
  $('.toplinks a').on('click', function(e) {
    e.preventDefault();
    // get the classname
    var cl = $(this).attr('class');
    
    // slide up
    $('.sublinks').slideUp("slow", function() {
      //on callback (= after slide up is done)
      // show all links
      $('.sublinks li').show();
      // hide the ones not having the right class
      $('.sublinks li:not(.'+cl+')').hide();
      // slide down again
      $('.sublinks').slideDown("slow");
    });
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
  <li><a href="#" class="privatecar">Private Car</a></li>
  <li><a href="#" class="commercialvehicle">Commercial Vehicle</a></li>
</ul>
<ul class="sublinks">
  <li class="privatecar"><a href="private/key-facts.pdf">private Key Facts</a></li>
  <li class="privatecar"><a href="private/policy-wording.pdf">private Policy Wording</a></li>
  <li class="commercialvehicle"><a href="commercial/key-facts.pdf">commercial Key Facts</a></li>
  <li class="commercialvehicle"><a href="commercial/policy-wording.pdf">commercial Policy Wording</a></li>
</ul>