swap css class with jQuery

Question

I have a link that, when clicked expands into a div below. I need to add some sort of indicator to "My Link", like a "carrot" icon that will turn down to indicate expanding of the section. Basically I thought I need to add the icon in a css class and then swap that class with another that has different image. I found toggleClass bit it seems like it adds/removes the class instead of swapping it.

So how would I replace class?

Here's what I have now without adding the visual indicator.

$("#mLink").click(function() {
    $("#showHideDiv").slideToggle("fast");
});

<span id="mLink">My Link</span>
<div id="showHideDiv">
   hidden content
</div>

I

jAndy · Accepted Answer · 2011-02-07 22:59:04Z

3

You should invoke .toggle()^help. Like

$('#myLink').toggle(function() {
    $("#showHideDiv").slideDown("fast").toggleClass('open');
}, function() {
    $("#showHideDiv").slideUp("fast").toggleClass('open');
});

answered Feb 7, 2011 at 22:59

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

Simon Jensen · Accepted Answer · 2011-02-07 23:05:19Z

2

Just string 2 toggles together something like

$('#myDiv').toggleClass('a').toggleClass('b');

and have your target start with one of the classes..

<div id="myDiv" class="b"> bla bla </div>

and then each call will toggle both giving the result you want.

answered Feb 7, 2011 at 23:05

Simon Jensen

562 bronze badges

1 Comment

Onimusha Over a year ago

+1 IMO this is the best way - simple and uncomplicated. Works perfectly

Collectives™ on Stack Overflow

swap css class with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related