Accordion preventing click on link

Question

I have an accordion with a link in it, but whenever I click on the link, the accordion thinks I'm trying to close it. It's set up so you can click anywhere on the accordion to open or close it which I would like to keep, but when I person clicks on the link, ignore the accordion behavior and follow the link instead.

<div class="wrap">
    <div class="top"></div>
    <div class="middle">
        <h3>Always showing</h3>
        <div class="hidden">
            <p>I want to <a href="/lets-gooo">follow this link</a>.</p>
        </div>
    </div>
    <div class="bottom"></div>
</div>


$('.wrap').on(touchClick, function (e) {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(this).find('.hidden').slideUp('fast');
        return false;
    }
    $('.wrap').each(function (index, el) {
        $(this).removeClass('active');
        $(this).find('.hidden').slideUp('fast');
    });
    $(this).find('.hidden').slideDown('fast');
    $(this).addClass('active');
});

DasBeasto · Accepted Answer · 2014-07-22T20:46:41.303

1

Not tested but I believe this will work

$('.wrap').on(touchClick, function (e) {
//other code
});
$( "a" ).click(function( event ) {
  event.stopPropagation();
});

It should stop the click from bubbling up and triggering the accordion events.

As an afterthought if you want use touchClick like youre accordion you could rewrite it as.

$( "a" ).on(touchClick, function (e) {
  e.stopPropagation();
});

edited Jul 22 '14 at 20:46

answered Jul 22 '14 at 20:35

DasBeasto

2,082
5
25
65

where would this be added? sorry, i'm pretty new to jquery. – itsclarke Jul 22 '14 at 20:36
Edited to show, I assume you could use the .on(touchClick) instead of .click() like you did with wrap as well. – DasBeasto Jul 22 '14 at 20:39

score 1 · Answer 2 · edited May 23 '17 at 10:33

You will need to tell the browser to stop the event from bubbling up the event chain using event.stopPropagation() (see this so post for more details on this). This means that jQuery never gets to know about the click event, thus it won't close the accordion.

Add this in the specific link's click event listener and it should work as you want it to:

$('.wrap a').each(function(e){
   e.stopPropagation(); // stop the event from bubbling up
});

However, don't confuse it with event.preventDefault(), which would not stop the event from bubbling up, but it would stop the browser from opening the link when it's clicked.

Accordion preventing click on link

2 Answers2