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

Question

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?

Answer 1

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();