$ .slideUp () does not work with elements in the "display: none" element in CSS

Question

I have a website that I am designing that has some nested div elements that I use as containers for hosting extensible buttons.

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

Everything works fine as long as I don't have a DIV that is inside the parent DIV, with the display property set to "none".

Is there a way to get the jQuery.slideUp () method to minimize extensible buttons, regardless of whether it is on the display: not a single parent or not?

OR, what property / properties do I need to set $ .slideDown () to execute correctly for the item that was configured on the display: none parent DIV?

Answer 1

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

Thus, when you apply the .slideDown () method, it will assume that the element is already hidden using the .slideUp () method.

Answer 2

If the parent has display:none; , you will need to show it before trying to offset the child. You can do this with the show function.

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

In a comment, you could simply specify the display property "block"

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

Answer 3

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

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

That way, I could get the same result without losing the animation.