Remove display:none from slideToggle in jQuery

Question

I am using slideToggle jQuery function.which adds display: none to the element.

But i need to add/remove classes(.displayNone/.displayBlock) instead of adding style="display:block/display:none to the element.

How to achieve it?.

$('button').click(function(){
    $('p').slideToggle('normal');
})

jsFiddle

Answer 1

.toggleClass()

$('p').toggleClass('displayNone displayBlock');////Adds 'displayNone', removes 'displayBlock' and vice versa

You need to add class to p element:

<p class="displayBlock">

DEMO

If you want animation: use opicity ans transition together, because display:none does not work with transition.

Here is demo:

Transition Demo

Update

---

Animation with added and removing class with callback function of slide toogle:

$('button').click(function(){
    $('p').slideToggle('normal',function(){ $(this).toggleClass('displayNone displayBlock');});
})

DEMO