Toggle the css property of a div using jquery/javascript

Question

I'm trying to write a code where I can toggle the CSS property of a div. Basically I'm trying to create a button that has a normal state and an active state.

Its normal color is blue but once you click it, it becomes green. Click it again and it goes back to being blue.

CSS:

    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin: 5px;
        color: white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        float: left;
        }


        .lgreen{
            -moz-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
              0 -1px 1px #666, /*top external shadow*/ 
              inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
              inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
            font-size: 16pt;
            padding: 5px;
            margin: 5px;
            color: white;
            background: #7ebb44; /* Old browsers */
            background: -moz-linear-gradient(top,  #7ebb44 0%, #a5d063 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ebb44), color-stop(100%,#a5d063)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #7ebb44 0%,#a5d063 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ebb44', endColorstr='#a5d063',GradientType=0 ); /* IE6-9 */
            font-family: OpenSans-Semibold;
            float: left;
            }

HTML:

 <div class="lblue">Soul</div> 

JS:

        $('.lblue').click(function() {
          $('.lblue').toggle(function() {
            $('.lblue').addClass('lgreen');

          });
        });

The problem with my code is that for some reason when I click the button, the button disappears as if it is sliding out.

Answer 1

http://api.jquery.com/toggle/

Toggle method shows/hides elements on each call.

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

Answer 2

I can't agree with the rest of the answers. Even though they are correct they don't seem to be semantically correct, the classes of the elements will contain both lblue and lgreen classnames:

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

And they will rely in the order which classnames were defined in your CSS.

Avoid future problems and use a semantically correct for what it is seen and what is is in the DOM:

$(document).on("click", ".lblue, .lgreen", function(){
  $(this).toggleClass("lblue lgreen");
});​

If all your elements initial states are blue then:

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

The former will work for dynamically added elements, the latter won't.

Check it out.

Answer 3

You were using .toggle() incorrectly.

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

Answer 4

With plain javascript you can use classList toggle https://developer.mozilla.org/en-US/docs/DOM/element.classList

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
alert(div.classList.contains("foo"));

In your case: (assuming only one element to modify; see also querySelectorAll and getElementsByClassName)

document.querySelector('.lblue').classList.toggle('lgreen');

Since it's quite new feature see: http://caniuse.com/classlist for browser compatibility

Answer 5

I guess you can check with the color and perform an event.

Eg.)

As in your case: Initial color = Blue. Transformed color = Green

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

Just my guess. I don't really know for what exactly you are looking for.