How can I change the class of an element with jQuery>

Question

I have a JavaScript function that looks like this:

function UpdateFilterView() {
 if (_extraFilterExists) {
 if ($('#F_ShowF').val() == 1) {
 $('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
 $('#extraFilterDropDownButton').css("display", "block");
 if ($('#divCategoryFilter').css("display") == 'none') {
 $('#divCategoryFilter').show('slow');
 }
 return;
 } else {
 if ($('#divCategoryFilter').css("display") == 'block') {
 $('#divCategoryFilter').hide('slow');
 }
 $('#extraFilterDropDownButton').css("display", "block");
 $('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
 return;
 }
 } else {
 if ($('#divCategoryFilter').css("display") != 'none') {
 $('#divCategoryFilter').hide('fast');
 }
 $('#extraFilterDropDownButton').css("display", "none");
 }
}

This will be triggered by the following code (from within the $(document).ready(function () {}):

$('#extraFilterDropDownButton').click(function() {
 if ($('#F_ShowF').val() == 1) {
 $('#F_ShowF').val(0);
 } else {
 $('#F_ShowF').val(1);
 }
 UpdateFilterView();
});

The HTML for this is easy:

<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div>

I have two problems with this:

1. When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.

2. When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?

The correct class will be set on the button when hovering it, this is set with the following code:

$("#extraFilterDropDownButton").hover(function() {
 if ($('#divCategoryFilter').css("display") == 'block') {
 $(this).attr('class', 'showhideExtra_up_hover');
 } else {
 $(this).attr('class', 'showhideExtra_down_hover');
 }
 },
 function() {
 if ($('#divCategoryFilter').css("display") == 'block') {
 $(this).attr('class', 'showhideExtra_up');
 } else {
 $(this).attr('class', 'showhideExtra_down');
 }
 });

• rsp: Just a suggestion: your question might have a better chance getting answered here if you posted a minimal code example that would demonstrate your problem, preferably using jsFiddle.
• Jeremy Battle: To summarize...are you just asking for a button that will reveal a div that is hidden and then hide the div when its shown?
• T J: "but the button will not change to the correct class" - which is the correct class..? "When the panel is hidden" - i don't understand what yo mean by panel..?

Answer 1

To set a class completely, instead of adding one or removing one, use this:

$(this).attr("class","newclass");

Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.

• T J: Ok. but the OP is also using .attr('class', "showhideExtra_down") then how is this supposed to fix the issue..?
• Falke Design: The Answer is correct and working! .attr('class', "className") is correct.

Answer 2

Use jQuery's

$(this).addClass('showhideExtra_up_hover');

and

$(this).addClass('showhideExtra_down_hover');

Answer 3

<script>
$(document).ready(function(){
 $('button').attr('class','btn btn-primary');
}); </script>

• Reporter: I think it would be more helpful for the OP and further visitors, whenn you add some explainations for your intension.
• Catto: This code sample helps to see clearly how to add 2 or more classes by using spaces between them.

Answer 4

I like to write a small plugin to make things cleaner:

$.fn.setClass = function(classes) {
 this.attr('class', classes);
 return this;
};

That way you can simply do

$('button').setClass('btn btn-primary');