Display none ! important need to override by using jQuery

Question

Anyone who is knowing how to override the below mentioned css by using jQuery ?

 .actionButton.single-pet         {             display: none !important;         } 

It won't work for this : $('.actionButton.single-pet').show();

Answer 1

$('.actionButton.single-pet').attr("style", "display: inline !important"); 

Sets CSS to display: inline !important;. display: inline is the default property for display. You need !important again to override the previous !important.

Note that !important shouldn't be used often. Read the accepted answer at How to override !important? for more details.

UPDATE: We can't use .css() here as it does not support !important. http://bugs.jquery.com/ticket/11173 for more details; appears to be a bug.

Answer 2

$('.actionButton.single-pet').removeClass('single-pet'); 

Or just:

$('.actionButton.single-pet').addClass('single-pet-shown'); 

With CSS:

.actionButton.single-pet-shown {     display: block !important; }