Keep button in active state until clicked upon again

Question

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. This part works fine, however I want to be able to add to my onClick function, the ability to keep the button in the active state (so that it remains highlighted until clicked upon again).

Any ideas? I tried keeping the focus on it instead, but I don't think its possible to have multiple button focuses, and that really just sounds like a hack.

Answer 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 ;)

Answer 2

You have to use toggleclass feature of jQuery

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

Check working code on jsfiddle

Answer 3

It seems that you need toggle functionality.

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