How to Show a Child DIV While Hiding its Parent DIV?

Displaying Hidden Child DIVs Within Invisible Parent DIVs

In this article, we address the challenge of displaying a child DIV while keeping its parent DIV hidden. This functionality may be necessary for scenarios where you wish to conditionally show or hide specific portions of your content.

Question:

How can we reveal a child DIV while hiding its parent DIV?

Answer:

To achieve this, modify the visibility settings of both the parent and child DIVs using CSS.

For the parent DIV:

• Set the visibility property to hidden or collapse.
• Optionally, you can also set the width, height, margin, and padding properties to 0 to minimize its impact on layout.

For the child DIV:

• Set the visibility property to visible.

By doing this, the child DIV will become visible while the parent DIV remains hidden.

Implementation:

Here's a revised version of your code incorporating the suggested solution:

.Main-Div {
  visibility: hidden;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}

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

Example:

For a live demonstration, please refer to the provided JSFiddle link in the original answer: http://jsfiddle.net/pread13/h955D/153/

The above is the detailed content of How to Show a Child DIV While Hiding its Parent DIV?. For more information, please follow other related articles on the PHP Chinese website!