Hi,

I have a link which triggers the apearance of some text. I only want this to work once, so when the link is clicked a second time nothing will happen, as the text has already appeared. To achieve this, I'm triggering it via a class, then removing the class so it can't trigger again. However, for some reason, the class isn't being removed and therefore the animation can be triggered more than once.

Here's the relevant javascript:

$(document).ready(function(){
    $('.jsHoverable1').click(function() {
        $('.jsHoverable1').removeClass('jsHoverable1');
        $('#jsContent1').show();
        return false;
    });
});

And here's the HTML:

<h6><a class="jsHoverable1" href="#">Read more</a></h6>
<div id="jsContent1" style="margin-top: 10px;">Some text!</div>

Can anyone see why the class isn't removed? Thank you.

  • Are you *sure* that the class isn't removed? Like, you've checked with Firebug and everything? Are you sure that the click handler gets invoked at all? (I don't see anything obviously wrong with your code.) Mike McNally about 9 years ago

2 answers

o.k.w 2355
2
points
This was chosen as the best answer

When you attach event handler to the element via class selector, removing the class does not detach the handler as it is internally attached to the instance of the element.

You should be using unbind like this:

$('.jsHoverable1').click(function() {
    $(this).unbind('click');
    $(this).removeClass('jsHoverable1');        
    $('#jsContent1:hidden').show();
    return false;
});

UPDATE

Just perform toggling:

$('.jsHoverable1').click(function() {
    if($('#jsContent1:hidden').length > 0) {
        $('#jsContent1').show();
        // perform other stuff e.g. assigning different class if showing content
    }
    else {
        $('#jsContent1').hide();
        // perform other stuff e.g. assigning different class if hiding content
    }
});
Answered about 9 years ago by o.k.w
  • Thanks OKW, that helped/works! I'm now trying to hide the content if the link is clicked a second time, by adding a different class to the link after removing its initial class, and then adding a similar method as the one above, to hide the content and swap the classes back when the new class is clicked, but it's not working. Is it because of the unbind? Edward Williams about 9 years ago
  • Yea, unbinding a 'click' without specifying any function will detach any click event handler. If the 2 classes do not have any other purpose other than for the clicking action, I would suggest not swapping them. Anyway I've updated my answer with a new set of codes that perform toggling of showing/hiding. o.k.w about 9 years ago
  • That's excellent! Thank you. I've not seen "if($('#myID:hidden').length > 0) {" used before in this way, but it works exactly as I need it to. Thank you very much. Edward Williams about 9 years ago
BPartch 342
0
points

It's working for me, how are you hiding the div on load? I used:

#jsContent1{
  display:none;
}
Answered about 9 years ago by BPartch