CODEWITHSUNDEEP
javascriptjquery
itsclarke
itsclarke

Reputation: 8982

Accordion preventing click on link

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');
});

Upvotes: 0

Views: 134

Answers (2)

DasBeasto
DasBeasto

Reputation: 2282

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();
});

Upvotes: 1

Fabian Lauer
Fabian Lauer

Reputation: 9897

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.

Upvotes: 1

Related Questions