CODEWITHSUNDEEP
javascriptjquery
pak40
pak40

Reputation: 3

jQuery trouble: add class /remove class nested inside show / hide

I'm a beginner and I have a problem. Could you please help me? I made to divs on top of each other. I made two other divs ("buttons")with paragraphs and I use jQuery show / hide effect to switch the two divs. This part is working very well. Nevertheless I want to add a nother effect (add class/ remove class) inside of this effect to show witch one is active. But It's not changing the outlook of the "buttons". Could you please help me where I made the mistake?

Here is my Code:

$(document).ready(function(){
   $( "#click2" ).click(function(){
     $( "#two" ).show();
     $("#click2").removeClass(".passive").addClass(".active");
   });
   $( "#click1" ).click(function(){
     $( "#two" ).hide();
     $("#click1").removeClass(".passive").addClass(".active");
   });
 });
.active, .passive{
  cursor: pointer;
  font-weight: bold;
}
.active{
  border-bottom: 2px solid blue;
  color: blue;
}
.passive{
  border-bottom: 2px solid gray;
  color: gray;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="row">
  <div id="click1" class="col-xs-6 active">
    <p  class="text-center text-uppercase">referencies a</p>
  </div>
  <div id="click2" class="col-xs-6 passive">
    <p class="text-center text-uppercase">referencies b</p>
  </div>
</div>

So the show / hide is wirking but the add/ remove class isn'n. Could you please help me where I made the mistake?

Upvotes: 0

Views: 1634

Answers (5)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

you have to remove the dot from the class , and also add the changing calls for the other button as below code 

$(document).ready(function() {
  $("#click2").click(function() {
    $("#two").show();
    $("#click2").removeClass("passive").addClass("active");
    $("#click1").removeClass("active").addClass("passive");
  });
  $("#click1").click(function() {
    $("#two").hide();
    $("#click1").removeClass("passive").addClass("active");
    $("#click2").removeClass("active").addClass("passive");
  });
});
.active,
.passive {
  cursor: pointer;
  font-weight: bold;
}

.active {
  border-bottom: 2px solid blue;
  color: blue;
}

.passive {
  border-bottom: 2px solid gray;
  color: gray;
}

`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="click1" class="col-xs-6 passive">
    <p class="text-center text-uppercase">referencies a</p>
  </div>
  <div id="click2" class="col-xs-6 active">
    <p class="text-center text-uppercase">referencies b</p>
  </div>
</div>
<div class="row">
  <div id="two" class="col-xs-12 active">
    <p class="text-center text-uppercase">Div content </p>
  </div>
</div>

Upvotes: 1

Alex Kocharian
Alex Kocharian

Reputation: 1

  1. You don't need to use dot when use jQuery class methods, as already mentioned;

  2. You could try to keep it simplier by using toggleClass instead of addClass and removeClass:

    $( "#click3" ).click(function(){
    $("#click3, #click4").toggleClass("active passive");
});
$( "#click4" ).click(function(){
    $("#click3, #click4").toggleClass("active passive");
});

You could mention differencies in behavior (now active element become passive on click).

To simplify even more, we could add just one listener, but check what exactly we clicking:

$(document).on('click', '.passive', function() {
  $('#click1, #click2').toggleClass("active passive");
});

https://jsfiddle.net/aakochar/u3c34b48/

  1. As an alternative (or if you want to investigate the code), take a look at bootstrap tabs: http://getbootstrap.com/javascript/#tabs

Upvotes: 0

Vikram Kumar
Vikram Kumar

Reputation: 4136

Remove '.' (dot) from the css class name. jQuery addClass and removeClass only takes the name of the css class.

addClass("className") -- correct
addClass(".className") -- wrong

In your case it will be like: 

$("#click2").removeClass("passive").addClass("active");

Upvotes: 3

Milan Chheda
Milan Chheda

Reputation: 8249

While using removeClass and addClass, you only need to provide classname, . is not needed.

$(document).ready(function() {
  $("#click2").click(function() {
    $("#two").show();
    $(this).removeClass("passive").addClass("active");
    $("#click1").removeClass("active").addClass("passive");
  });
  $("#click1").click(function() {
    $("#two").hide();
    $(this).removeClass("passive").addClass("active");
    $("#click2").removeClass("active").addClass("passive");
  });
});
.active,
.passive {
  cursor: pointer;
  font-weight: bold;
}

.active {
  border-bottom: 2px solid blue;
  color: blue;
}

.passive {
  border-bottom: 2px solid gray;
  color: gray;
}

`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="click1" class="col-xs-6 active">
    <p class="text-center text-uppercase">referencies a</p>
  </div>
  <div id="click2" class="col-xs-6 passive">
    <p class="text-center text-uppercase">referencies b</p>
  </div>
</div>
<div class="row">
  <div id="two" class="col-xs-12 active">
    <p class="text-center text-uppercase">Div content </p>
  </div>
</div>

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Here is the updated code:

<script type="text/javascript">
       $(document).ready(function(){
         $( "#click2" ).click(function(){
           $( "#two" ).show();
           $("#click2").removeClass("passive").addClass("active"); // Removed `.` from class names
         });
         $( "#click1" ).click(function(){
           $( "#two" ).hide();
           $("#click1").removeClass("passive").addClass("active");  // Removed `.` from class names
         });
       });
     </script>

Upvotes: 0

Related Questions