Show Child Div within Hidden Parent Div
I don't think it's possible.
You can use JavaScript to pull the element out, or duplicate it and then show it.
In jQuery you could copy an element.
var element = jQuery('.Inner-Div').clone();
And then append to any visible element that might be appropriate.
element.appendTo('some element');
Agreed, not possible with display:none
. Here's a different solution that will hide parent and show child - however, the height of the parent will not be collapsed.
.Main-Div {
position: relative;
left: -9999px;
}
.Inner-Div {
position: relative;
left: 9999px;
}
Example: http://jsfiddle.net/luke_charde/jMYF7/
Set the parent class's visibility to hidden or collapse. Set the child to visible. Something like this:
.parent>.child
{
visibility: visible;
}
.parent
{
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
Full example: http://jsfiddle.net/pread13/h955D/153/
Edited with help from @n1kkou