CODEWITHSUNDEEP
javascriptjquery
exoboy
exoboy

Reputation: 2058

$.slideUp() not working on elements in a CSS "display:none" parent element

I have a site I am designing that has some nested DIV elements that I use as containers to hold expandable buttons.

The user clicks on a button and it expands to expose some more content.

Everything works great until I have a DIV that is inside of a parent DIV with it's display property set to "none".

Is there any way to force the jQuery .slideUp() method to minimize the expandable buttons regardless of whether it is in a display:none parent or not?

OR, what property/properties do I need to set to make $.slideDown() work properly on an element that was setup up in a display:none parent DIV?

Upvotes: 4

Views: 5734

Answers (3)

kikus
kikus

Reputation: 51

I had the exact same problem and none of the mentioned solutions worked for me the way I expected, as sometimes I lost the slideUp/slideDown animation itself when applying the show() function. My final solution was using a callback function to apply the style directly:

$(divToSlide).slideUp(delay, function () {
    // When animation ends
    $(this).css('display', 'none');
});

This way I could get the same result without losing the animation.

Upvotes: 0

henkojinko
henkojinko

Reputation: 173

Instead of applying slideUp() to the expandable buttons, try setting their "display" value to "none".

This way, when you apply the .slideDown() method it will think that element has already been hidden using the .slideUp() method.

Upvotes: 3

Adam Rackis
Adam Rackis

Reputation: 83366

If the parent has display:none; then you'll need to show it before trying to slideUp the child. You can do this with the show function.

$(divToSlide).parent().show();
$(divToSlide).slideUp();

Per the comment, you could alternatively, you could just set the display property to 'block'

$(divToSlide).parent().css("display", "block");
$(divToSlide).slideUp();

Upvotes: 6

Related Questions