jQuery slideDown() slideUp() require two clicks

Question

I've seen quite a few iterations of this question, but no solutions to my particular problem.

Issue occurs when clicking on an h3 that's the trigger for toggling visibility on a list of links underneath. The selectors and behaviors work fine, showing the hidden items and hiding the others properly. Once a header's been clicked once, however, it must thereafter be clicked twice to perform the toggle. It's a small annoyance, but I'd like a solution.

So clicking on one header will slide it down if it's closed and up if it's open, adding and removing the .active class respectively… all good.

Clicking on another header will behave properly as well, hiding the open list and opening the clicked one.

But if you go back to the first header, previously opened but now closed, a single click on it will not initiate the toggles. It has to be clicked a second time.

That's the problem in a nutshell. I have limited access to the page code, so most of the traversing selecting has to be done in jQuery with the tags already in place.

Here's the page in question: http://queensvw.com/documents/stackoverflow

Here's the jQuery:

$(document).ready(function() {
  function hideAll() {
    $('#minutes_highlights .date_heading').nextAll('.document_listing').slideUp();
  }

  hideAll();

  $('#minutes_highlights .date_heading').click(function() {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).nextUntil('hr').slideUp();
    } else {
      $(this).addClass('active');
      hideAll();
      $(this).nextUntil('hr').slideDown();
    }
  });
});

I tried adding a preventDefault() and a setTimeout() based on other threads. To be honest I wasn't sure why they'd matter since I'm not acting on the a, but they didn't fix the click issue anyway.

Any ideas on how to avoid the second click?

Answer 1

This is because that you are not removing the active class when you click on an other element. Now, I can't certify this will work since i can't test it, but i'm pretty sure that is you change the else condition to that :

else {
  $('.active').removeClass('active');
  $(this).addClass('active');
  hideAll();
  $(this).nextUntil('hr').slideDown();
}

it will work.