jQuery: change class on click event

Question

I am using jQuery for a panel to show and hide. There is a small arrow image on it which also changes on hide and show. My code is

<div class="trigger-m"><span id="toppanelarrow">&nbsp;</span></div>

Now a class is added to_up when the panel opens and to_down when the panel closed. I have respective up and down arrow image for this.

Can someone help me adding a jQuery on click event of 'toppanelarrow' so a new class gets added to the span.

I have tried $().addClass().removeClass() but this didn't work.

Update: Please find the fiddle implementation http://jsfiddle.net/B5QUj/4/

Thanks

Sorry Guys for replying late. I have coded it in jsfiddle and here is the link. jsfiddle.net/B5QUj/3 — Aditya
– Aditya, Commented Mar 14, 2012 at 18:28

Yoshi · Accepted Answer · 2012-03-14 14:09:45Z

3

If you have one class on the element to start with:

$('#foo').on('click', function () {
  $(this).toggleClass('to_up to_down');
});

is all you need.

demo: http://jsfiddle.net/kXNk8/

answered Mar 14, 2012 at 14:09

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

1 Comment

sam kh Over a year ago

this is good fast and way to do it

mjalajel · Accepted Answer · 2012-03-14 14:07:59Z

2

Also, you can try

$(this).toggleClass('classname');

answered Mar 14, 2012 at 14:07

mjalajel

2,22122 silver badges27 bronze badges

Comments

Nicola Peluchetti · Accepted Answer · 2012-03-14 14:05:32Z

1

You should try (this adds the class to_down if the span has the class to_up

$('#toppanelarrow').click(function(){
   if($(this).hasClass('to_up')){
     $(this).addClass('to_down').removeClass('to_up');
   }else{
     $(this).addClass('to_up').removeClass('to_down');
   }
});

this could also be written

$('#toppanelarrow').click(function(){
      $(this).toggleClass('to_up to_down').;
});

answered Mar 14, 2012 at 14:05

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

Frederiek · Accepted Answer · 2012-03-14 14:12:23Z

0

To get the wanted effect:

Html:

<input id="btn" type="button" value="click it" />

<div class="box">
    <span>Tekst</span>
</div>

js:

$(document).ready(function(){

    $("#btn").click(function(){
        $(".box").toggle();
    });    
});

answered Mar 14, 2012 at 14:12

Frederiek

1,6132 gold badges17 silver badges32 bronze badges

Comments

Code Lღver · Accepted Answer · 2012-03-15 09:51:06Z

0

Try:

$("#yourClassID").addClass("cssClass");

edited Mar 15, 2012 at 9:51

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

answered Mar 14, 2012 at 14:09

Dude Lebowski

1591 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery: change class on click event

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related