FreeLancer FreeLancer - 6 months ago 7
HTML Question

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

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