CODEWITHSUNDEEP
javascriptjquery
sammarcow
sammarcow

Reputation: 2956

check element type clicked

I have a div that I want to expand/contract with the exception of links. I have the following code, which works but lacking the exception. What is the most efficient way of ensuring all elements and areas within the div "expandablediv" cause expand/conract with jquery, with the exception of the element. 

$("#expandablediv").click(function () {
                if ($("#withinexpandlediv").is(":hidden")) {
                    $("#withinexpandlediv").fadeIn(50);
                }
                else {
                    $("#withinexpandlediv").fadeOut(50);
                }
            });

HTML Code: 

<div id="expandablediv" >
    <div class="ddImage">
        <img src="rightArrow.png" alt="Title">
    </div>
    <div class="ddText">
        Title
    </div>
    <div id="withinexpandlediv" >
        Text contains one or more <a href="mailto:[email protected]"> email links.</a>
    </div>
</div>

Upvotes: 0

Views: 486

Answers (3)

Jason P
Jason P

Reputation: 27022

If you mean you don't want links to trigger the toggle, use event.target.nodeName:

        $("#expandablediv").click(function (e) {
            if (e.target.nodeName == "A") { return; }
            //if ($(e.target).is('a')) { return; } // also works

            if ($("#withinexpandlediv").is(":hidden")) {
                $("#withinexpandlediv").fadeIn(50);
            }
            else {
                $("#withinexpandlediv").fadeOut(50);
            }
        });

nodeName: http://jsfiddle.net/m7vpk/

is(): http://jsfiddle.net/FQuzt/

Upvotes: 3

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

you can try this :

$("#expandablediv").click(function () {
            if ($("#withinexpandlediv").is(":hidden")) {
                $("#withinexpandlediv").fadeIn(50);
            }
            else {
                $("#withinexpandlediv").fadeOut(50);
            }
}).find('a').click(function(e){
    e.stopPropagation();
});

Upvotes: 0

mavili
mavili

Reputation: 3424

Something like

if(!$('#expandablediv').children().has('a')){
    // handle expandsion/contraction here
}

Check this link for more details: jQuery .has()

Upvotes: 2

Related Questions