Assign class to tag1 and unassign from tag2 and vice versa with a click-CodePudding

$(".btn1").click(function() { //on each click one class shows and other hides but i cant figure it out
  $(".darktheme").addClass("displaynone");
  $(".whitetheme").removeClass("displaynone");
});

.displaynone {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >
<span >Dark Theme</span>
<span >White Theme</span>
</button>

CodePudding user response：

Use .toggleClass() instead:

$(".btn1").click(function() { //on each click one class shows and other hides but i cant figure it out
  $(".darktheme, .whitetheme").toggleClass("displaynone");
});

.displaynone {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >
<span >Dark Theme</span>
<span >White Theme</span>
</button>