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-06and 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.

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-06and 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.

• javascript
• jquery
• html
• css

• just Go to this links : api.jquery.com/toggleclass – Upendrasinh Jadeja Commented Feb 26, 2016 at 14:11
• 1 Please edit your question and include an actual problem statement. What do you expect to happen, what is actually happening, are there errors thrown? – Sebastian Simon Commented Feb 26, 2016 at 14:13
• 1 The code you have works if its run after the DOM is ready, you can see it working here: jsfiddle.net/hosw2wc9 – ak_ Commented Feb 26, 2016 at 14:17
• ok sorry it was resolved ;) You give the solution Thanks :) – FreeLancer Commented Feb 26, 2016 at 14:34

4 Answers 4

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

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/

You can try this way:

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

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

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