How can i change css with javascript when i click on it? I would like to change .javakast to .javakast2 and when i click multiple times on it should move back and forth.

<script>
$(".ribad").click(function(){
    $("javakast").toggleClass("javakast2");
});
</script>

CSS

.javakast{
    background-color:blue;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}
.javakast2{
    background-color:red;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:300px;
    position:absolute;
    z-index:999999;
}

HTML

<div class="ribad">

<div class="javakast"></div>

<div>

How can i change css with javascript when i click on it? I would like to change .javakast to .javakast2 and when i click multiple times on it should move back and forth.

<script>
$(".ribad").click(function(){
    $("javakast").toggleClass("javakast2");
});
</script>

CSS

.javakast{
    background-color:blue;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}
.javakast2{
    background-color:red;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:300px;
    position:absolute;
    z-index:999999;
}

HTML

<div class="ribad">

<div class="javakast"></div>

<div>

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited Aug 29, 2017 at 17:50 Mihai Alexandru-Ionut 48.5k1414 gold badges105105 silver badges132132 bronze badges asked Jan 22, 2017 at 13:05 in2din2d 6381111 silver badges2727 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

Use your jquery method inside

<script>
    $(function(){
       $(".ribad").click(function(){
           $(".javakast").toggleClass("javakast2");
       });
    });
</script>

You use $("javakast") and this is not the correct selector.You have to use $(".javakast").Also, you have to wrap code in $(document).ready() function.

$(document).ready(function(){
  $(".ribad").click(function(){
      $(".javakast").toggleClass("javakast2");
  });
});

$(".ribad").click(function(){
    $(".javakast").toggleClass("javakast2");
});

.javakast{
    background-color:blue;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}
.javakast2{
    background-color:red;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ribad">

<div class="javakast"></div>

<div>

$(function () {
    $("#ribad").click(function () {
        $(".javakast").switchClass("javakast", "javakast2");
        $(".javakast2").switchClass("javakast2", "javakast");
    });
});

.javakast{
   color:red;
}
.javakast2{
   color:blue;
}

<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<div class="ribad" id="ribad">
    <div class="javakast" id="javakast">
       <h1>Click me to change class</h1>
    </div>
</div>

Don't forget to add <script src="https://code.jquery./jquery-1.12.4.js"></script> <script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script> in your file.

The should be bind to elements after page is ready. Here is the code for it.

<script>
$(document).ready(function(){
    $(".ribad").click(function(){
      $("javakast").toggleClass("javakast2");
   });
});
</script>

You are selecting an element by a class using jquery then you have to include a . in front of it.

<script>
$(".ribad").click(function(){
    $(".javakast").toggleClass("javakast2");
});
</script>

and if you are not including your script at the end of the body then use jquery ready method, like this

$(document).ready(function(){
  $(".ribad").click(function(){
      $(".javakast").toggleClass("javakast2");
  });
});

Jquery toggle is toggling a single class on / off. what you need is toggling between two different classes.

see this stackoverflow answer...

Easiest way to toggle 2 classes in jQuery

according to this answer you should try :

$(".ribad").click(function(){
    $(".javakast, .javakast2").toggleClass("javakast javakast2");
});

This is the solution you're after. I don't think you want to toggle between adding and removing javakast2 on .javakast, but swapping between classes. If element has javakast then replace its class with javakast2, and vice versa.

$('#toggle').on('click', function(){

    // Save matches to a variable
    var classJSK  = $(".javakast:not(.javakast2)");
    var classJSK2 = $(".javakast2:not(.javakast)");

    classJSK.each(function(){
       $(this).addClass('javakast2').removeClass('javakast');
    });

    classJSK2.each(function(){
       $(this).removeClass('javakast2').addClass('javakast');
    });
  
});

div {
    width:100px;
    height:100px;
}
.javakast{
    background-color:blue;
}
.javakast2{
    background-color:red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div class="javakast"></div>
<div class="javakast2"></div>