Jquery add and remove classes via CSS

Question

hope you are doing well

so, I shorten the story, here we have a button and I want to be responsive and also to check: IF THE TAG HAS ONE OF THOSE CLASSES THEN CHANGE IT WITH THE OTHER ONE

how can I do it?

function bt1Func() {
  if ($("#funcp").hasClass('unhidden-pr')) {
    $("#funcp").addClass("hidden-pr");
  }
  if ($("#funcp").hasClass("hidden-pr")) {
    $("#funcp").addClass("unhidden-pr");
  }

}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp">hi</p>
</div>

You add the class "hidden-pr" and then immediately change it back. That's why epascarello says `if/else if` is important. You don't want second condition if first one is met. — daddygames, Feb 01 '21 at 21:00
You may want to check out https://stackoverflow.com/questions/7002039/easiest-way-to-toggle-2-classes-in-jquery to utilize jQuery's `.toggleClass()` to swap between 2 classes instead. Also, be sure to remove the other class too (i.e. don't have both `unhidden-pr` and `hidden-pr` classes on the element, instead you may want to use https://api.jquery.com/removeclass/ too) — WOUNDEDStevenJones, Feb 01 '21 at 21:01
https://www.tutorialrepublic.com/jquery-tutorial/jquery-add-and-remove-css-classes.php — Ruben, Feb 01 '21 at 21:01

epascarello · Accepted Answer · 2021-02-01T21:10:13.583

read your code out loud.

If funcp has class unhidden-pr, add class hidden-pr and if funcp has class hidden-pr add unhidden-pr.

So you really should be using an else if or just else. You also are not removing the class.

function bt1Func() {
  if ($("#funcp").hasClass('unhidden-pr')) {
    $("#funcp").addClass("hidden-pr").removeClass("unhidden-pr");
  } else {
    $("#funcp").addClass("unhidden-pr").removeClass("hidden-pr");
  }
}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="hidden-pr">hi</p>
</div>

IN the end you are just reinventing toggle class

function bt1Func(){
  $("#funcp").toggleClass('hidden-pr unhidden-pr');
}

.hidden-pr {
  display: none;
}

.unhidden-pr {
  display: flex;
}

#funcp {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="hidden-pr">hi</p>
</div>

but you really only need to toggle one class if you write your CSS correctly

function bt1Func(){
  $("#funcp").toggleClass('active');
}

.pr {
  display: none;
}

.pr.active {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bt1Func()" id="bt1" class="activate style-a">Pizza</button>

<div class="container-men">
  <p id="funcp" class="pr">hi</p>
</div>

one thing to note here is that `toggleClass` call only works as expected if it starts with either the `hidden-pr` or `unhidden-pr` class. Otherwise it will add both or remove both simultaneously. Demo at https://stackoverflow.com/questions/7002039/easiest-way-to-toggle-2-classes-in-jquery#comment104702008_7002053 — WOUNDEDStevenJones, Feb 01 '21 at 21:03

score 1 · Answer 2 · answered Feb 01 '21 at 21:02

You can use if-else , along with add/RemoveClass

function bt1Func() {
       if ($("#funcp").hasClass('unhidden-pr')) {    
                $("#funcp").removeClass("unhidden-pr");
                $("#funcp").addClass("hidden-pr");
        }
        else if ($("#funcp").hasClass("hidden-pr")) {
               $("#funcp").removeClass("hidden-pr");
               $("#funcp").addClass("unhidden-pr");
        }       
    }

Jquery add and remove classes via CSS

2 Answers2