title: I want to make an iframe hidden by default and to be shown onclick (of an image).
body: <p>But with what I have done, if I make the display mode : none or block then I cant make it shown on click.</p>
  
  <p>Also when I click on the show/hide image it scrolls at the beginning of the page, instead of staying at the same place and showing the iframe.</p>
  
  <p>Any help for that?</p>
  
  <p>With that below I made the show/hide function</p>
  
  <pre><code>    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
      $(document).ready(function(){
  
        $("#on").click(function(){
  
          $("map").show();
  
        });
  
        $("#off").click(function(){
  
          $("map").show(); 
  
        });
  
      });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>I frame and image are:</p>
  
  <pre><code>&lt;div id="show/hide" align="center"&gt;
      &lt;a href="#" id="on"&gt;
        &lt;img src="http://icons.iconarchive.com/icons/double-j-design/apple-festival/256/app-map-icon.png"  width="80" height="80"&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>                    </p>
  
  <pre><code>&lt;div id="map" style="display:block ;"&gt; 
    &lt;iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>