Is there a way to add a different action on the second click with jQuery?

Question

My current code is this:

$('.how-we-menu').on('click', function() {
  $('.how-we-menu > ul').slideDown();
  $('.under').on('click', function() {
    $('.under > ul').slideDown();
  })
  $('.over').on('click', function() {
    $('.over > ul').slideDown();
  })
  $('.ar').on('click', function() {
    $('.ar > ul').slideDown();
  })
  $('.fc').on('click', function() {
    $(this).children('ul').slideToggle();
  })
});

I am trying to avoid slide toggle because it affects another element and slides both of them up so I want to make each element work individually. So when you click ".fc > ul" once it slides down and when you click again it slides up.

I hope this makes sense thanks!

Answer 1

Use $(this) in the function so it only affects the element you clicked on.

$('.fc').on('click', function() {
    $(this).children('ul').slideToggle();
});

And all the event handlers should be at top level, not inside another event handler. Since they all do the same thing, you can bind them all at once.

 $('.how-we-menu, .under, .over, .ar, .fc').on('click', function() { $(this).children('ul').slideToggle(); });