IFrame contents do not show up in an hidden div container

Question

I have got some problems while displaying an Iframe content within hidden DIV-Container.

As soon as the link gets clicked, the div container gets visible, that works so far, but the content within, which is an amp-iframe itself do not show up. Something is preventing the Iframe from loading the content.

Here is some code extract:

<a href="#" class="bsel" [text]="visible ? 'On' : 'Off'" on="tap:AMP.setState({visible: !visible})">
 Click me
 </a>
......
<div id="showInfo" [class]="visible ? 'show' : 'hide'" class="hide">
   <amp-iframe width=600 height=500 scrolling=yes frameborder="1"
                            layout="responsive"
                            sandbox="allow-scripts allow-same-origin"
                            src="xxxxxxxx">......</div>

BTW: Without the show/hide effect the Iframe contents gets loaded and everything works alright.

What I am doing wrong?

Answer 1

Here is a working version:

  <a href="#" class="bsel" [text]="visible ? 'On' : 'Off'" on="tap:showInfo.toggleVisibility">
    Click me
  </a>

  <div id="showInfo" hidden>
    <amp-iframe width=600 height=500 scrolling=yes frameborder="1" layout="responsive" sandbox="allow-scripts allow-same-origin" src="https://ampbyexample.com">
      <div placeholder></div>
    </amp-iframe>
  </div>

It's better to use the built-in hidden action in this case.