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

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
– Sebastian Simon, Commented Feb 26, 2016 at 14:13
The code you have works if its run after the DOM is ready, you can see it working here: jsfiddle.net/hosw2wc9 — ak_
– ak_, Commented Feb 26, 2016 at 14:17

Rajaprabhu Aravindasamy · Accepted Answer · 2016-02-26 14:19:47Z

12

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

edited Feb 26, 2016 at 14:19

answered Feb 26, 2016 at 14:10

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FreeLancer Over a year ago

Dosen't work, sorry =( Rajaprabhu Aravindasamy but thanks

Rajaprabhu Aravindasamy Over a year ago

@FreeLancer I have added a side note for you, please have a look

FreeLancer Over a year ago

Problem Solved Thanks

Palak Patel · Accepted Answer · 2016-02-26 14:30:29Z

1

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/

answered Feb 26, 2016 at 14:30

Palak Patel

2452 silver badges6 bronze badges

Comments

DebRaj · Accepted Answer · 2016-02-26 14:31:10Z

0

You can try this way:

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

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

answered Feb 26, 2016 at 14:31

DebRaj

6095 silver badges16 bronze badges

Comments

FreeLancer · Accepted Answer · 2016-02-26 14:39:45Z

0

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

answered Feb 26, 2016 at 14:39

FreeLancer

891 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Css onclick change class

4 Answers 4

DEMO

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related