CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FreeLancer
FreeLancer

Reputation: 89

Css onclick change class

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.

Upvotes: 3

Views: 23210

Answers (4)

FreeLancer
FreeLancer

Reputation: 89

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

Upvotes: 0

DebRaj
DebRaj

Reputation: 599

You can try this way:

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

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

Upvotes: 0

Palak Patel
Palak Patel

Reputation: 245

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/

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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

Upvotes: 12

Related Questions