How to change a css class on a div tag in jquery based on a certain condition

Question

I have the following HTML:

<div class="required">
<label for="personID">People</label>
<select name="personID" id="personID"  class="select">
<option value="" selected="selected" >No One Selected</option>
<option value="groupA" >Group A</option>
<option value="groupB" >Group B</option>
...

And I have this HTML:

<div class="visControl optional" style="display: none;">
<label for="refNum">Reference Number</label>
<input type="text" value="" name="refNum" id="refNum">
</div>

And I have the following SCRIPT:

<script>
  $('#personID').change(function() {
    if ($('#personID').val() == 'groupB') $('.visControl').show();
    else $('.visControl').hide();
  }); // end .change()
</script>

My script properly controls the visibility of the Reference Number block. But what I want it to also do is change the class attribute from "optional" to "required" to match the visibility.

In other words, when I show the Reference Number block I want the div.optional to become div.required and when I hide the Reference Number block I want the div.required to become div.optional

j08691 · Accepted Answer · 2014-04-01 20:56:31Z

1

Use .toggleClass():

Change:

if ($('#personID').val() == 'groupB') $('.visControl').show();
else $('.visControl').hide();

to:

if ($('#personID').val() == 'groupB') $('.visControl').show().toggleClass('required  optional');
else $('.visControl').hide().toggleClass('required  optional');

jsFiddle example

edited Apr 1, 2014 at 20:56

answered Apr 1, 2014 at 20:48

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

H. Ferrence Over a year ago

That is not working for me. I no longer get the block to show or hide

j08691 Over a year ago

I just added a fiddle to my answer. If you watch the DOM while changing the select, you'll see the class change.

H. Ferrence Over a year ago

Ok, thanks @j08691 -- I see that it should work so I need to play around with it in my script. I'll post back later once I get it figured out.

H. Ferrence Over a year ago

awesome @j8691 -- exactly what I needed it to do. Thanks for your help.

H. Ferrence Over a year ago

actually @j8691 this is pretty close to what I need. After I tested it I recognized that the toggle keeps alternating the optional and required. What I actually need is required when .show() and optional when .hide() something like what [at]CamTullos has below but maybe on one line of code versus 2 lines of code

Cam Tullos · Accepted Answer · 2014-04-01 20:47:33Z

1

Try:

$('div.optional').addClass('required'); 
$('div.optional').removeClass('optional');

answered Apr 1, 2014 at 20:47

Cam Tullos

2,5872 gold badges21 silver badges18 bronze badges

2 Comments

H. Ferrence Over a year ago

I think part of your answer @CamTullos and part of [at]j8691is what I need combined into 1. This is working but I am wondering if it cn be simplified or combined into 1 line of code

if ($('#personID').val() == 'groupB') { $('.visControl').show().addClass('required'); $('.visControl').show().removeClass('optional'); } else { $('.visControl').hide().addClass('optional'); $('.visControl').hide().removeClass('required'); }

H. Ferrence Over a year ago

Also, what id the div class already has optional or required. Does this keep adding more like classes or does is just add them once?

Collectives™ on Stack Overflow

How to change a css class on a div tag in jquery based on a certain condition

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related