Remove class using jQuery when clicked for the second time and also disable hover effect on the second click

Question

Remove class using jQuery when clicked for the second time and also disable hover effect on the second click

I'm trying to implement a feature that removes the 'active' class when a checkbox is clicked for the second time, similar to how Pinterest handles checkboxes for Twitter and Facebook. Here's what I have tried so far:

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

I have a couple of questions:

How can I remove the 'active' css class on the second click of the checkbox?
Is there a way to disable '.add_link_twitter:hover' when the Twitter checkbox is selected?

Any help would be greatly appreciated!

Here's the relevant jQuery code:

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

Here's a snippet of the html:

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

And here's the related CSS styling:

.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;
}

javascript jquery css class jquery-selectors

Answer 1

Answer №1

Instead of

When clicking on the element with the class postTwitter, add the class activePostTwitter to it:
$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

Try using:

When clicking on the element with the class postTwitter, toggle the class activePostTwitter on and off:
$(postTwitter).click(function(e) {  
  $(this).toggleClass(activePostTwitter); 
});

EDIT:

The click event seems to trigger twice due to event propagation. To solve this issue, assign the click handler to the input element within postTwitter and have it toggle the class of its parent instead:

Handle click events on the input element inside postTwitter and toggle the class activePostTwitter on its parent:
$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

Check out a demo on jsfiddle: http://jsfiddle.net/bpfqB/

Answer 2

Instead of

When clicking on the element with the class postTwitter, add the class activePostTwitter to it:
$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

Try using:

When clicking on the element with the class postTwitter, toggle the class activePostTwitter on and off:
$(postTwitter).click(function(e) {  
  $(this).toggleClass(activePostTwitter); 
});

EDIT:

The click event seems to trigger twice due to event propagation. To solve this issue, assign the click handler to the input element within postTwitter and have it toggle the class of its parent instead:

Handle click events on the input element inside postTwitter and toggle the class activePostTwitter on its parent:
$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

Check out a demo on jsfiddle: http://jsfiddle.net/bpfqB/

Answer 3

Answer №2

This solution is designed to address both of your inquiries:

$(function() {
    "use strict";
    var $postTwitter = $("label.add_link_twitter");

    $postTwitter.find("input:checkbox").click(function() {
        $(this).parent().toggleClass("active");
        if($("input.publish_to_twitter").is(":checked")) {
            $(this).parent().removeClass("hover");
        }
    });

    $postTwitter.hover(
        function() {
            if($("input.publish_to_twitter").is(":checked")) {
                return;
            }

            $(this).addClass("hover");
        },
        function() {
            $(this).removeClass("hover");
        });
});

Please note that adjustments must be made to your CSS for this to work, as hovering should be handled using jQuery instead of relying solely on CSS hover effects.

DEMO

Answer 4

This solution is designed to address both of your inquiries:

$(function() {
    "use strict";
    var $postTwitter = $("label.add_link_twitter");

    $postTwitter.find("input:checkbox").click(function() {
        $(this).parent().toggleClass("active");
        if($("input.publish_to_twitter").is(":checked")) {
            $(this).parent().removeClass("hover");
        }
    });

    $postTwitter.hover(
        function() {
            if($("input.publish_to_twitter").is(":checked")) {
                return;
            }

            $(this).addClass("hover");
        },
        function() {
            $(this).removeClass("hover");
        });
});

Please note that adjustments must be made to your CSS for this to work, as hovering should be handled using jQuery instead of relying solely on CSS hover effects.

Remove class using jQuery when clicked for the second time and also disable hover effect on the second click

Answer №1

Answer №2

DEMO

Similar questions

Using the PUT method in combination with express and sequelize

Upon postback, the Jquery Chosen plugin dynamically creates a new section

Is adding a property to a div using the Jquery Css Function taking longer than expected?

Aligning radio button vertically in React using Bootstrap styling

Troubleshooting problems with resizing images using CSS

Retrieve information from XML using jQuery

AngularJS and JQuery validated

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Sequential jQuery AJAX requests triggering in an incorrect sequence

Storing Documents on Your Device

In AngularJS, enhance pagination loading by appending a $resource queried array to the end of another

Having trouble getting the libphonenumber npm package up and running, encountering an error stating that fs.readFileSync is not functioning properly

Deliver an intentionally bogus HTTP response using Express

Using Typescript: invoking static functions within a constructor

What could be the reason for the failure in my mocha/chai Error throwing test?

Is it possible to create a cross-sectional view of a lens using the HTML5 canvas element?

Select2 - Issue with AJAX causing search results to not display in dropdown

Issue with Bootstrap Navbar dropdown causing page refresh instead of menu dropdown activation

Tips for updating the border color of a button:

Delay in loading Jquery accordion due to value binding