toggleClass won't change class

Question

I've got a problem with toggleClass in jQuery.

Here's the code:

$(".guzik").click(function() {
    $("#third").toggleClass('.pillar-animation-two');
});                  

function test(){
    document.getElementById('third').className('.pillar-animation-two');
}

.pillar {
    width:50px;
    height:10px;
    background-color:red;
    margin-top:5px;
}

.pillar:nth-child(1) {
    margin-top:0;
}

.pillar-animation-one {
    transform:rotate (10deg);      
}

.pillar-animation-two {
    transform:rotate (20deg);
    width:10px; 
    height:10px;
    background-color:red;
    margin-top:5px;      
}

.pillar-animation-three {     
    animation-name:three;
    animation-duration:1s;
}
   
@keyframes three {
    0%{transform:rotate(0deg);}
    100%{transform:rotate(40deg);}
}

.button {
    margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
    <div class="pillar"></div>
    <div class="pillar"></div>
    <div class="pillar" id="third"></div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>

What am I doing wrong ? addClass also does not work so I am really confused. I've made a JS function too but it's still not working.

Where have I made a mistake ?

Greets

Answer 1

Check this :-)

$(".pillar").click(function()
{
  $(".pillar").toggleClass('pillar-animation-two');
});
                     
                     
                     

  function test(){
    $("#third").toggleClass('pillar-animation-two');
  //document.getElementById('third')[0].toggleClass('pillar-animation-two');
  
  }

.pillar
{
  width:50px;
  height:10px;
  background-color:red;
  margin-top:5px;
}
.pillar:nth-child(1)
{
  margin-top:0;
  
}

.pillar-animation-one
{
  transform:rotate (10deg);
  
}
.pillar-animation-two
{
  transform:rotate (20deg);
  width:10px; 
  height:10px;
  background-color:red;
  margin-top:5px;
  
}

.pillar-animation-three
{
 
  
  animation-name:three;
  animation-duration:1s;
  
  
  
}
@keyframes three
{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(40deg);}
  }

.button
{
  margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar">
  </div>
<div class="pillar">
  </div>
  <div class="pillar" id="third">
  </div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>

Answer 2

Element does not have the className method. It is a property. The right way to add a class name using Vanilla JS is

document.getElementById('third').className = 'pillar-animation-two';

Doing so will override all the classes for the elements.

You just need

$(".button").click(function() {
  $("#third").toggleClass('pillar-animation-two');
});

Check Fiddle

Answer 3

Remove the . in toggleClass. It takes only the name, since the . indicates its a class and it already knows its a class.

$("#third").toggleClass('.pillar-animation-two');

Should be...

$("#third").toggleClass('pillar-animation-two');

Answer 4

If you are using toggleClass there's no need to use dot (.) while declaring the class.

$(".guzik").click(function() {
  $("#third").toggleClass('pillar-animation-two');
});

function test() {
  $('#third').toggleClass('pillar-animation-two');
}

.pillar {
  width: 50px;
  height: 10px;
  background-color: red;
  margin-top: 5px;
}
.pillar:nth-child(1) {
  margin-top: 0;
}
.pillar-animation-one {
  transform: rotate (10deg);
}
.pillar-animation-two {
  transform: rotate (20deg);
  width: 10px;
  height: 10px;
  background-color: red;
  margin-top: 5px;
}
.pillar-animation-three {
  animation-name: three;
  animation-duration: 1s;
}
@keyframes three {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(40deg);
  }
}
.button {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
  <div class="pillar">
  </div>
  <div class="pillar">
  </div>
  <div class="pillar" id="third">
  </div>
</div>
<button class="button" type="button" onclick="test()">Click me !</button>
<button class="guzik">Another Click me!</button>