Question

I have a toggle panel script in jQuery whereby my content expands and collapses when I click the h2 element.

Problem is I have input fields in that h2 element, which come about when I try to edit something using jEditable. I would like to find a way so that when I click on that input field, I don’t get a click event.

My guess is somehow to use the :not selector method but I’ve tried a bunch of iterations to no avail.

CODE

    //toggle panel content
    $(".panelcollapsed h2").click(function(){
        $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
    });

Answer 1

You could test to see if the event originated on an input element, and ignore it if it did:

$(".panelcollapsed h2").click(function(e){
    if (e.target.tagName.toLowerCase() === 'input') {
        return;
    }

    $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});

This checks the tagName of e.target, the element where the event originated, to see if it is the same as input. If so, return exits the event handler.