Question

I have a link like this:

<a hreflang="15" class="comment-show-link" href="">View/hide comments</a>

And then have this code to show/hide the content:

$('.comment-show-link').click(function(e) {
  $('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
  e.stopPropagation();
});

But when I click the link the page is sended and the div “#comment-show-” isn’t showed, why? What I’m doing wrong?

Answer 1

Try:

<a data-hreflang="15" class="comment-show-link" href="#">View/hide comments</a>

–

$('.comment-show-link').on('click', function(e) {
    e.preventDefault();
    $('#comment-show-'+$(this).data("hreflang")).slideToggle('slow');
});

or to prevent both the default action and bubbling, do

$('.comment-show-link').on('click', function() {
    $('#comment-show-'+$(this).data("hreflang")).slideToggle('slow');
    return false;
});