CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3321059
user3321059

Reputation: 3

Do not run jQuery function when <a> tag clicked

I currently work with some jQuery, where i have got some problems.

I got this code

if ($(".accordion").length > 0) {
    $(".accordion").each(function() {
        var item = $(this).find(".accordion-text");
        var height = item.outerHeight() + 20;
        item.data("height", height + "px").css("height", "0px");
    })
}



$(".accordion").on("click", function(e) {

    foldOut($(this));

});

function foldOut(accordien) {
    console.log(accordien);
    var item = $(accordien).find(".accordion-text");

    if ($(accordien).hasClass("accordion-open")) {
        $(item).stop().transition({
            height: '0px'
        }, 500, 'in-out');
        $(accordien).find(".accordionArrow").removeClass("accordionBgActive");
        console.log($(accordien).find(".accordionArrow"));
    } else {
        $(accordien).find(".accordionArrow").addClass("accordionBgActive");
        $(item).stop().transition({
            height: item.data("height")
        }, 500, 'in-out');
    }

    $(accordien).toggleClass("accordion-open");
}

But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div.. How can i get the div not to fold when the click is on an a tag?

HTML Where its "closed"

<div class="row">
        <div class="overflow-hide rel">
            <div class="accordion rel col-md-12 no-pad">
                <div class="accordionHeaderDiv">
                    <h3>Test</h3>
                    <div class="accordion-header-teaser">
                        <p>TestTestTestTestTestTestTestTestTestTest</p>
                    </div>
                </div>
                <div class="accordion-text" style="height: 0px;">
                    <p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
                    <p><a href="/" target="_blank" title="ZBC">Test</a></p>
                </div>
                <div class="accordionArrow" style="   position: absolute; top: 0;  cursor: pointer;  right: 43px; height: 30px;"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

Upvotes: 0

Views: 58

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Filter it out regarding event target:

$(".accordion").on("click", function(e) {
    if(e.target.tagName.toLowerCase() === "a") return;
    foldOut($(this));
});

As anchor can contains other contents, a more relevant way would be:

$(".accordion").on("click", function (e) {
    if ($(e.target).closest('a').length) return;
    foldOut($(this));
});

Upvotes: 2

Related Questions