Question

I have a (long) <script> element that displays a Google visualization. The code comes straight from Google; I have no way to change it.

I need the output of this hidden until the user clicks Show.

I had two attempts to achieve this goal:

1. If the script tag is processed inside a hidden DOM node, it fails to display when the containing node is shown.

2. If the script tag is dynamically inserted jQuery('#parent-element').html('<script...>'); then it fails because it requires document.write which cannot run asynchronously (no way to tell where in the document to write it)

The reason I need the show/hide buttons is because the output is displayed in a full-screen overlay (it is too big for the normal content area).

I would like a solution that works generically so my client can embed other “magic” html chunks provided by external SAAS (google, youtube, …)

Answer 1

instead of display:none use a invisible element (visibility:hidden).

display:none means that the element is not rendered as part of the DOM.
it is not loaded until the display property changes to something else.

visibility:hidden loads the element, but does not show it.