Maintain the button in an enabled state until it is clicked once more

Question

Maintain the button in an enabled state until it is clicked once more

I have a question that I hope you can help me with. I have an HTML input tag with a button type that triggers a JavaScript onclick function. The functionality is working as expected, but now I want to enhance it by keeping the button in an active state after being clicked (highlighted) until it is clicked again.

Do you have any suggestions on how I can achieve this? I initially tried to maintain focus on the button, but it seems like having multiple button focuses isn't possible and could be considered a workaround rather than a proper solution.

javascript jquery html css web

Answer 1

Answer №1

If you don't have any code, here's an example for you to work with:

Imagine this is your HTML button:

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

Let's add some style to it:

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

Now let's define the styling for when the button is active:

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

All you need to do now is write a simple jQuery function:

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

And there you have it :-)

You can also see my example on JSFiddle here: http://jsfiddle.net/S7kJ2/

Good luck!

Answer 2

If you don't have any code, here's an example for you to work with:

Imagine this is your HTML button:

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

Let's add some style to it:

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

Now let's define the styling for when the button is active:

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

All you need to do now is write a simple jQuery function:

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

And there you have it :-)

You can also see my example on JSFiddle here: http://jsfiddle.net/S7kJ2/

Good luck!

Answer 3

Answer №2

To achieve this effect, you will need to implement the toggleClass function from jQuery.

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

You can see a live example of this code in action on jsfiddle.

Answer 4

To achieve this effect, you will need to implement the toggleClass function from jQuery.

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

You can see a live example of this code in action on jsfiddle.

Answer 5

Answer №3

It appears that you are in need of toggle functionality.

You can experiment with the jQuery toggleClass() method for this: http://api.jquery.com/toggleclass/

Answer 6

It appears that you are in need of toggle functionality.

You can experiment with the jQuery toggleClass() method for this: http://api.jquery.com/toggleclass/

Maintain the button in an enabled state until it is clicked once more

Answer №1

Answer №2

Answer №3

Similar questions

The loading of the module from was hindered due to an invalid MIME type restriction

showcasing the picture in the email is consistently

What is the best method for validating multiple fields in a form with Javascript?

PHP and jQuery: Using 1 Query to Retrieve Multiple JSON Strings and Looping Through Them to Populate a Multiselect

Manage the input in the text field using a checkbox

Can you explain the significance of this async JavaScript server application error?

Exploring the power of Reactjs and managing server-side data

Issues with the alignment of columns using Bootstrap framework

Is there a way to determine if a specific string matches a value within an object?

Ways to eliminate the design from a previously selected list item

Tips for removing cookies with Javascript after an allotted period of time

What could be the reason for the error this code is generating in the HTML validator?

What is the best way to duplicate a CSS shape across a horizontal axis?

Close dynamic overlay modal when client-side validation fails during submission

Raycasting intersection with a line on BufferGeometry in Three.js

Customers can access the order details after completing a Paypal payment

Expand the contents inside a div without affecting the actual div

Performing the multiplication of two numbers stored in an object using AngularJS and then calculating the sum

Receiving a `combined` error when updating Meteor isopacket - sourcemapConsumer.destroy function is not recognized

What could be the reason for the top alignment of only a portion of the cell