Question

I’m trying to remove class ‘active’ when you click on the checkbox the 2nd time, the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:

Adding ‘active’ class on click is easy. However, I couldn’t figure how to remove it once it was added. I tried this, but it didn’t work:

$(".add_link_twitter.active").click(function(e) {  
      $(this).removeClass(activePostTwitter); 
    });

I have two questions:

1. How to remove the ‘active’ css class on the 2nd click on the
   checkbox?
2. How to disable ‘.add_link_twitter:hover’ when the Twitter
   checkbox is selected?

Thanks in advance!

Here’s the jQuery:

var postTwitter = ".add_link_twitter"; 
var activePostTwitter = "active"; 
$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

Here’s the html:

<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>

Here’s the css:

.add_link_twitter{
    position:absolute;
    left:15px;
    bottom:16px;
    color: #a19486;
    border: 2px solid transparent;
    border-color: #F0EDE8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.active {
    border-color: #468BD0;
    color: #468BD0;
    background-color: whiteSmoke;
}

.add_link_twitter:hover
{
    color: #A19486;
    border: 2px solid transparent;
    border-color: #C2B1A2;
    border-radius: 4px;
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Answer 1

Instead of

$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

use

$(postTwitter).click(function(e) {  
  $(this).toggleClass(activePostTwitter); 
});

EDIT:

The event triggers twice per click, probably because of event propagation. To work around this, assign the handler to the input and have it change the class of its parent:

$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

Confirm jsfiddle: http://jsfiddle.net/bpfqB/