Question

I have the following jQuery:

$('.io-sidebar-section').click(function () {
      console.log('Section Clicked');
      $(this).next().fadeToggle('fast',function(){});
    });

    $('.io-sidebar-section-advanced-toggle').click(function(){
      $(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
    });

the advanced toggle is inside of a sidebar section. When I click on the advanced toggle, it executes the sidebar section click.

How can I seperate these two out?

Answer 1

You can use the stopPropagation method of the event object inside the click event handler for the child element:

$('.io-sidebar-section-advanced-toggle').click(function(e){
    e.stopPropagation();
    $(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
});

From the jQuery docs, here’s what stopPropagation does:

Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event.

As mentioned in the comments, if you prefer you can alternatively use return false in the event handler (in this particular case, as far as I can tell anyway – it will also cause preventDefault which may not be what you want to happen). My personal preference is to use stopPropagation but it’s completely up to you.