Show Child Div within Hidden Parent Div

How can I show a Child Div while keeping its Parent Div hidden? Can this be done?

My Code is below:

<style>
  .Main-Div{
   display:none;
}
</style>

<div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
        <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
</div>

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

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/

Why not:

.Main-Div{
font-size:0px;
line-height:0;
margin:0;
padding:0;
height:0;

}

.Inner-Div{
font-size:12pt
}

instead of display:none if your Main Div is text only?

This solution should collapse the text in the parent div without hiding the child div. Also still works with screen readers without doing weird things like bumping the div out of view or duplicating the object with JS.

I used a jQuery trick to replace the parent code with the child code. It was something I needed for my specific problem, but it might be helpful for someone else:

<div id='wrapper'>
   testcontent... void info from a template
   <div id='inside'>
      I wanted this content only
   </div>
</div>

then the code:

$(document).ready(function(){
   $("#wrapper").html($("#inside").html());
});

note that this will not affect the ID's of the DIVS... another option is this (that will keep the ID's the same:

$(document).ready(function(){
   $("#wrapper").before($("#inside").outerHTML).remove();
});

Since it's not possible to do that, you could clone/pull the element as mentioned in this answer

But if events on this element affect its parent/children you can try this workaround.

1. Put a wrapper around the parent div
2. add another children to the wrapper (which will be used as reference)
3. Hide the parent div.

Like this -

 <style>
  .Main-Div{
  display:none;
  }
 </style>

 <div class="wrapper">

  <div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
      <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
  </div>

  <div class="Inner-Div-Refer'>
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>

</div>

Now trigger all events in div 'Inner-Div-Refer' to original div 'Inner-Div'. Like -

$('.Inner-Div-Refer a').click(function(){
  $(this).parent().children('.Main-Div').children('.Inner-Div').children('a').trigger('click');
});

No. Unfortunately for you, it is not possible.

Well, this is an old one, but I hit it too. My solution was a bit different:-

1. Create an image with the same colour as the background (white in my case) that will cover the div. This image has absolute positioning and z-index higher than the div that I want to hide.
2. Make the inner div (the one that you want to see) position: relative and give it the highest z-order.
3. main div starts out as hidden.
4. When the page loads, position the covering image and make the main div visible. Since the div is a lower z order it will be behind the covering image so not visible. However, the inner div has a higher z-order again and will be visible.

The benefit of this approach is that the structure and position of the main div and child elements can remain unchanged throughout. This means that when you want to show the main div, you can simply remove the covering image. Also, if you want to see what the main div would look like when debugging you can just remove the covering image element in the browser debugger tools, such as firebug in firefox or ctrl+shift+i in chrome.

Just remember to set the z-index on an element it needs to be positioned absolute, relative or fixed. If you have any problems getting the z-index to take effect it is probably to do with stacking contexts. See here for a good description of how to solve this.

$(document).ready(function(){
var innerElement = $('.Inner-Div');
var parent = $('.Main-Div');

// body or whatever selector you want to move the element
$(body).append(innerElement);

// could use hide also
parent.detach(); })

I know this is an older post and someone already accepted the answer but I prefer this method. JQuery will move the element to the body (or any other selected location) via the append() method. I store the parent in a variable and detach() it so if you need to put it all back together later you can easily do:

$(body).append(parent);
parent.append(innerElement);

And everything is back the way it was.

I used simple JavaScript with querySelector to remove all target elements, while keeping what is inside them (now you can just apply any CSS selector):

{
    let selector = 'div';
    let remove_element = document.querySelector(selector);

    //loop continues removing elements until they are all out
    while (remove_element)
    {
        remove_element.outerHTML = remove_element.innerHTML;
        remove_element = document.querySelector(selector);
    }
}

I did this by using the visibility tag on the parent and child separately, then using the position tag to move the child element back into place to fit the flow of the document.

"display:none" was not an option, because you can't display and children of an element with this

.archive-title-custom-css {
	visibility:hidden;
	position:relative;
}
.archive-title-custom-css span {
	visibility:visible;
	position:absolute;
	left:0;
}