Question

Basically I have an element which when clicked causes another element to slideToggle. However what I am after is another element, say an image, inside the main parent element that when that is clicked it does not fire off the slideToggle event and can be used to fire another event…

A simplified version of my code is here:

http://jsfiddle.net/s3d5D/6/

..the blue box being a substitute for the image.

Markup:

<div class="holder">
    <div class="section"><div class="image"></div></div>
    <div class="hidden"></div>
</div>

jQuery:

$('.hidden').hide();
$(document).on('click', '.section', function(){
    $(this).nextAll('.hidden:first').slideToggle(500);
});

Answer 1

The target property of event arguments object contains the element that was really clicked. You can compare it to this (which will contain the related .section element) and find out whether it was the .section that was clicked, or something else:

$(document).on('click', '.section', function(e){
    if (e.target == this) {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
});

I’ve also forked your fiddle to illustrate this approach in action.