Keep Button In Active State Until Clicked Upon Again

I feel like I have a relatively simple question that I'm just not sure how to go about doing. I have an html input tag of button type which calls a javascript onclick function. Thi

Solution 1:

As you have no code i am giving you an example and i hope you have that you want:

Let's say this is your HTML button:

<div class="button ">My button</div>

Let's give it some styling

.button { 
float:left;
color: #333;
width: auto;
text-align: center;
padding: 0 10px;
background: #f0f0f0;
line-height: 1.5em;
height: auto;
}

And let's style your active button

.button.active {
background: #ea0000;
color: #fff;
}

Now that you have to do is to write a small jquery function:

<script>
$('.button').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>

And here you are ;-)

Heres my example on fiddle also: http://jsfiddle.net/S7kJ2/

Take care ;)

Solution 2:

You have to use toggleclass feature of jQuery

<input type='button' onClick="jQuery(this).toggleClass('active')">

Check working code on jsfiddle

Solution 3:

It seems that you need toggle functionality.

Please try with jQuery toggleClass() function: http://api.jquery.com/toggleclass/