I am using JQuery toggleClass to change the color of a button when it's clicked. When it's clicked again it should revert to the original color AND when the mouse is clicked anywhere else including white space, it should revert to the original color.

I couldn't figure out how to do it but below are two snippets that I managed to find and plug stuff in.

The following snippet will change the color when button is clicked but when clicked again it doesn't revert to original color but when any other element or a white space is clicked, the button color reverts to the original color:

  (function () {
$('.button_is').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $(this).siblings().removeClass('button_addition');
    $(this).toggleClass('button_addition');
});


$(document).click(function() {
    $('.button_is').removeClass('button_addition'); //make all inactive
});
});

The following snippet will toggle class when the element is clicked and when it's clicked again it reverts to it's original state but wont' revert to original color if clicked elsewhere:

 $(document).ready(function () {

            $(".button_is").click(function () {
                $(this).toggleClass("button_addition");
            });
        });

Which of these two snippets can I utilize to make sure that when the button is clicked the color changes and when it's clicked again it reverts to the original color AND when other elements or white space is clicked it reverts to the original color?

I am using JQuery toggleClass to change the color of a button when it's clicked. When it's clicked again it should revert to the original color AND when the mouse is clicked anywhere else including white space, it should revert to the original color.

I couldn't figure out how to do it but below are two snippets that I managed to find and plug stuff in.

The following snippet will change the color when button is clicked but when clicked again it doesn't revert to original color but when any other element or a white space is clicked, the button color reverts to the original color:

  (function () {
$('.button_is').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $(this).siblings().removeClass('button_addition');
    $(this).toggleClass('button_addition');
});


$(document).click(function() {
    $('.button_is').removeClass('button_addition'); //make all inactive
});
});

The following snippet will toggle class when the element is clicked and when it's clicked again it reverts to it's original state but wont' revert to original color if clicked elsewhere:

 $(document).ready(function () {

            $(".button_is").click(function () {
                $(this).toggleClass("button_addition");
            });
        });

Which of these two snippets can I utilize to make sure that when the button is clicked the color changes and when it's clicked again it reverts to the original color AND when other elements or white space is clicked it reverts to the original color?

• javascript
• jquery
• removeclass
• toggleclass

Share Improve this question Follow asked Apr 16, 2013 at 18:49 AAAAAA 3,1681111 gold badges5555 silver badges7373 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You may try this

$(document).ready(function () {

    $(".button_is").click(function (e) {
        e.stopPropagation();
        $(this).toggleClass("button_addition");
    });

    $(document).click(function() {
        $(".button_is.button_addition").trigger("click");
    });    

});

DEMO.

Try this

 $(function() {
        $('.button_is').on('click',
        function(event) {
            event.stopPropagation();
            $('.button_is').toggleClass('button_addition');
        });
        $('html').click(function() {
            $('.button_is').removeClass('button_addition');
        });
    });

Fiddle: http://jsfiddle/9ZKfq/

$(document).ready(function() {

    $(document).click(function(jEvent) {    

        if (!$(jEvent.target).hasClass('button_is')) 
        {
           $('.button_is').removeClass('button_addition');
        }
        else
        {
            $(jEvent.target).toggleClass('button_addition');
        }

    });

});

Try this -

    $(document).ready(function () {
        $(".button_is").click(function () {
            $(this).toggleClass("button_addition");
        });

        $(document).click(function(event) {
          if(!$(event.target).is('.button_is')){
            $('.button_is').removeClass('button_addition'); //make all inactive
          }
        });
  });

Your first snip works for me.

Maybe your HTML is the problem?

It's worth noting that there is a typo in your code (you're missing the $ on the ready handler).

Look at this: http://jsfiddle/URrVf/ It works on Chrome, Firefox and IE9.