CODEWITHSUNDEEP
jquery
user979331
user979331

Reputation: 11911

Jquery ToggleClass not toggling between two classes

I have these two elements:

<div class="a"></div>
<div class="b"></div>

I also have a checkbox:

<input type="checkbox" id="checkbox" />

What I am trying to do toggle between the two classes using jquery toggleClass like so:

$('#checkbox').click(function () {
        $(".urlWrapper .fileWrapper").toggleClass("urlWrapper fileWrapper");
    });

But its not toggling between the two....what am I doing wrong?

Upvotes: 0

Views: 57

Answers (2)

user7252292
user7252292

Reputation:

I think this is more what you are looking for. The classes were .a and .binstead of.urlWrapperand.fileWrapper`. Also, you you need to have a comma to select multiple classes.

$('#checkbox').click(function () {
  $(".urlWrapper, .fileWrapper").toggleClass("urlWrapper fileWrapper");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="urlWrapper">A</div>
<div class="fileWrapper">B</div>

<input type="checkbox" id="checkbox" />

Upvotes: 0

Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

What are you trying to achieve, it appears that you have two div's with different class names than you are trying to effect. Is the below what you are looking for?

$('#checkbox').on("click",function () {
        $(".a").toggleClass("urlWrapper fileWrapper");
        $(".b").toggleClass("urlWrapper fileWrapper");  
    });
.urlWrapper {
  color : red;
 }

.fileWrapper {
  font-weight:bold;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="a urlWrapper">
      content 1
    </div>
    <div class="b fileWrapper">
      content 2
</div>
    <input type="checkbox" id="checkbox" />

Upvotes: 1

Related Questions