set an element visible in a display:none

Question

I'd like to fetch an element in a display:none block, is it possible ??

For example:

<div style="display:none" >
    <h2>hi all</h2>
    <p>abc</p>
</div>

I'd like to display the h2 keeping the parent div in display:none.

Is there a solution ?

Answer 1

No, you cannot. By definition, all descendent elements of an element with display: none are not displayed. To quote the CSS spec:

9.2.4 The 'display' property

none

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Answer 2

Using your current HTML this would not be possible. The best thing to do would be something similar to the following

<div>
    <h2>hi all</h2>
    <div style="display: none;">
        <p>abc</p>
    </div>
</div>

Answer 3

If you need to retrieve some hidden values you can do using JavaScript. Just add an unique id to your element and retrieve it's value. Here's a jQuery way (without any document.ready() stuff):

<div style="display:none" >
  <h2 id="show_me">hi all</h2>
  <p>abc</p>
</div>

<script>
  element = $('#show_me').html();
  alert(element)

  //Plain JS way would be something like this.
  element_js = document.getElementById('show_me').innerHTML;
  alert(element_js)
</script>

You are not displaying per se the retrieved element but at least you are capable of showing it's contents and do whatever you like with it. Actually, I think this would be the closest thing in fetching the hidden element.