user3724896 user3724896 - 4 months ago 37
Javascript Question

Remove display:none from slideToggle in jQuery

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

.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

Comments