Change class css with javascript onclick

Question

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>

Mihai Alexandru-Ionut · Answer 1 · 2017-01-22T14:28:18.293

3

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ribad">

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

<div>

edited Jan 22 '17 at 14:28

answered Jan 22 '17 at 13:10

Mihai Alexandru-Ionut

47,092
13
101
128

Doesn't seem to work. It's weird because my other script is working perfectly fine. – in2d Jan 22 '17 at 13:43
No errors. Also here is some more CSS .ribad{ font-family: 'Montserrat', sans-serif; position:relative; border-top:solid 10px #3F8686; width: 100%; height: auto; padding:20px; margin:auto; margin-top:30px; text-align:center; } it would be impossible to not click .ribad its pretty big. – in2d Jan 22 '17 at 13:47
Yes. I have tryed with $(document).ready and without it. This simple piece of code worked in that same file a while ago but i removed it. – in2d Jan 22 '17 at 13:55

score 3 · Answer 2 · answered Jan 22 '17 at 13:10

3

Use your jquery method inside

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

answered Jan 22 '17 at 13:10

Ataur Rahman Munna

3,887
1
23
34

score 1 · Answer 3 · answered Jan 22 '17 at 13:13

1

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>

answered Jan 22 '17 at 13:13

Shoaib Konnur

459
4
14

score 1 · Answer 4 · answered Jan 22 '17 at 13:15

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");
  });
});

score 1 · Answer 5 · edited May 23 '17 at 12:09

1

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");
});

edited May 23 '17 at 12:09

Community

1
1

answered Jan 22 '17 at 13:19

score 1 · Answer 6 · answered Jan 22 '17 at 13:20

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div class="javakast"></div>
<div class="javakast2"></div>

score 1 · Accepted Answer · answered Jan 22 '17 at 13:57

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

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/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.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> in your file.

Change class css with javascript onclick

7 Answers7