Question

153

Css onclick change class

rated 0 times [ 159] [ 6] / answers: 1 / hits: 20721 / 8 Years ago, fri, february 26, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

agustindejonm

Add To Favorites

Follow

Total Points: 738

Total Questions: 84

Total Answers: 84

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

agustindejonm questions

1 Discord.js how to fetch message by content

Fri, Jun 25, 21, 00:00, 3 Years ago

1 Can't acess variable outside forEach loop JavaScript

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Security warning in the console of BrowserWindow (electron ^9.2.0)

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Filter array of objects based on the input passed: Javascript

Wed, Jul 15, 20, 00:00, 4 Years ago

1 how to refresh component in react js

Sat, May 16, 20, 00:00, 4 Years ago

View All

answered 8 Years ago adrianobeds · Accepted Answer

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

  });

})();