gtilflm gtilflm - 2 months ago 6
jQuery Question

jQuery: Hide container, then show element in that container

I want to hide a container element with class

page_wrapper
. Then I want to show only one element in that container with id
infinite_math_container
.

My code...

$('.page_wrapper').hide();
$('#infinite_math_container').show().delay(200);


Problem: The
$('.page_wrapper').hide();
works fine, but the
$('#infinite_math_container').show().delay(200);
isn't actually showing.

Thoughts?

Answer

Like @ŁukaszTrzewik said. If the parent of an element is hidden calling show() on it won't have any effect.

To fix this, you can do something like this:

$(".page_wrapper").children().not("#infinite_math_container"‌​).hide();

This will hide all the child elements of .page_wrapper except #infinite_math_container.

OR:

$(".page_wrapper").children().hide().find("#infinite_math_container"‌​).delay(200).show();

Which will hide all child elements of .page_wrapper and show the child #infinite_math_container after a delay of 200 milliseconds.

Both this example will work only if the #infinite_math_container element is a direct descendent of .page_wrapper.