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');
});