Add/Remove Class with jquery function

Question

I have this code.

CSS

body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none; 
}

HTML

<a href="#" class="show_hide">Show/hide</a>
<br />
<div class="slidingDiv">
    Fill this space with really interesting content.
    <a href="#" class="show_hide">hide</a>
</div>

JS

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });
});

Someone tell me if its possible to add in this jquery function that if i click on it, at the same time to show/hide a new div, change a class to an tag and remove another class from another tag? How can i do it?

Thanks.

Are the tags related in any way hierarchically? If so, yes. If not, no. — Tejs
– Tejs, Commented May 18, 2012 at 18:44

benqus · Accepted Answer · 2012-05-18 18:50:08Z

6

yes you can, take a look of the method addClass and also of the removeClass.

edited May 18, 2012 at 18:50

benqus

1,1472 gold badges10 silver badges24 bronze badges

answered May 18, 2012 at 18:44

Jorge

18.3k19 gold badges82 silver badges129 bronze badges

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

3 Comments

VisioN Over a year ago

... and removeClass, and JQuery documentation in general :)

bombai Over a year ago

Hi, thanks for your answers, but how can i apply this one to a specific menu>li>id="name" ?? Like this? $('#menu li name').removeClass('classname'); Thanks.

Jorge Over a year ago

open a new Question and asked for that doubt that you have

Jorge · Accepted Answer · 2012-05-18 19:13:29Z

5

remove: jQuery('element').removeClass('class'); reference
add: jQuery('element').addClass('class'); reference

And you can use toggleClass to switch.
toggle: jQuery('element').toggleClass('class otherClass'); reference

edited May 18, 2012 at 19:13

Jorge

18.3k19 gold badges82 silver badges129 bronze badges

answered May 18, 2012 at 18:56

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

1 Comment

bombai Over a year ago

Hi, thanks for your answers, but how can i apply this one to a specific menu>li>id="name" ?? Like this? $('#menu li name').removeClass('classname'); Thanks.

Belladonna · Accepted Answer · 2012-05-18 18:49:56Z

3

Add class:

$('selector').addClass('className');

Remove class:

$('selector').removeClass('className');

edited May 18, 2012 at 18:49

Belladonna

3,8622 gold badges26 silver badges33 bronze badges

answered May 18, 2012 at 18:45

panda

1,3443 gold badges14 silver badges35 bronze badges

2 Comments

bombai Over a year ago

Hi, thanks for your answers, but how can i apply this one to a specific menu>li>id="name" ?? Like this? $('#menu li name').removeClass('classname'); Thanks.

panda Over a year ago

just use the name attribute as selector. $("name=['the name']")

Sleiman Jneidi · Accepted Answer · 2012-05-18 18:46:31Z

1

yes of course you can add or remove classes

<script type="text/javascript">
$("#ButtonId").click(function () {
    $('#itemid').removeClass('classname');
    $('#itemid').addClass('classname');
});
</script>

answered May 18, 2012 at 18:46

Sleiman Jneidi

23.4k14 gold badges60 silver badges80 bronze badges

Collectives™ on Stack Overflow

Add/Remove Class with jquery function

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related