Search code examples
jqueryaddclassremoveclass

JQuery swapping classes

I'm learning JQuery and when writing my own little scripts, ran into a problem. So I have a navigation bar and each time a button is pressed, it should switch its css class from 'btn' to 'activebtn'. For testing purposes, I would just like to be able to click the SAME button, and have it switch back, although this doesn't happen. Does the JQuery just not update the classes? If this is the case, how would I go about forcing JQuery to do so?

<div class="btn">Hello</div>
<div class="btn">World</div>

<script>
$( ".btn" ).click(function() {
    $(this).removeClass('btn');
    $(this).addClass('activebtn');
});

$( ".activebtn" ).click(function() {
    $(this).removeClass('activebtn');
    $(this).addClass('btn');
});
</script>
Solution

  • Should just able to do:

    $( ".btn" ).click(function() {
    $(this).toggleClass('btn activebtn');
});