Css onclick change class

Question

I want to change a class when I click.

The class is icon icon_plus , and when i click i want that class to be icon icon_minus-06 and if click again back tothe original

My HTML code

<a href="#" id="top-bar-trigger" class="top-bar-trigger"><i id="icon"    class="icon icon_plus"></i></a>

My javascript code :

<script>
$("a.top-bar-trigger").click(ontop);
   function ontop() {

   $("#icon").toggleClass("icon icon_minus-06");
 }
</script>

I am very weak with javascript

Thanks for the help.

Answer 1

Try to write toggleClass like this,

$("#icon").toggleClass("icon_plus icon_minus-06");

Since you are keeping icon class as a static one.

DEMO

Also as a side note, try to wrap your code inside document's ready handler. Since the selector would fail, if you keep your script inside header tag. But If you have placed your script in the end of body tag, then no issues. Anyway its better to use document's ready handler as it would make the code more procedural.

The code should be like this,

(function(){
  function ontop() {
    $("#icon").toggleClass("icon_plus icon_minus-06");
  } 
  $(function(){
    $("a.top-bar-trigger").click(ontop);
  });
})();

Answer 2

You can solve this problem in two ways.

1) Using AddClass & RemoveClass Methods

    $("a.top-bar-trigger").click(changeClass);

    function changeClass() {
        if($("#icon").hasClass('icon_plus')){
            $("#icon").removeClass("icon_plus").addClass("icon_minus-06");
        }
        else{
            $("#icon").removeClass("icon_minus-06").addClass("icon_plus");
        }
    }

2) Using ToggleClass

    $("a.top-bar-trigger").click(changeClass);

    function changeClass() {
       $("#icon").toggleClass("icon_plus icon_minus-06");
    }

You can check the JSFiddle Links here

1) https://jsfiddle.net/4vzsn4kt/

2) https://jsfiddle.net/zzq820eu/

Answer 3

You can try this way:

$("a.top-bar-trigger").click(function(){
    $(".icon").toggleClass("icon_minus-06");
});

Fiddle: https://jsfiddle.net/5au3ywmz/2/

Answer 4

PROBLEM SOLVED

The code you have works if its run after the DOM is ready, you can see it working here: jsfiddle.net/hosw2wc9 – Adam Konieska