title: Is it possible to not load an iframe in a hidden div, until the div is displayed?
body: <p>Basically, a hidden div that's shown when a customer clicks on a link. That div displays a php formail that asks the customer questions about the product he/she is interested in.</p>
  
  <p>Here's the code i found online that works great for me using jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
  
  $('.show_hide').showHide({           
      speed: 500,  // speed you want the toggle to happen 
      easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
      changeText: 1, // if you dont want the button text to change, set this to 0
      showText: 'REQUEST A QUOTE',// the button text to show when a div is closed
      hideText: 'CLOSE' // the button text to show when a div is open
  
  }); 
  
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The css is just simple:</p>
  
  <pre><code>#slidingDiv, #slidingDiv_2{
  height:300px;
  background-color: #e2e2e2;
  padding:20px;
  margin-top:10px;
  border-bottom:30px solid #000000;
  display:none;
  }
  </code></pre>
  
  <p>Here's the external java script:</p>
  
  <pre><code>(function ($) {
  $.fn.showHide = function (options) {
  
      //default vars for the plugin
      var defaults = {
          speed: 1000,
          easing: '',
          changeText: 0,
          showText: 'Show',
          hideText: 'Hide'
  
      };
      var options = $.extend(defaults, options);
  
      $(this).click(function () { 
  
           $('.toggleDiv').slideUp(options.speed, options.easing);    
           // this var stores which button you've clicked
           var toggleClick = $(this);
           // this reads the rel attribute of the button to determine which div id to toggle
           var toggleDiv = $(this).attr('rel');
           // here we toggle show/hide the correct div at the right speed and using which easing effect
           $(toggleDiv).slideToggle(options.speed, options.easing, function() {
           // this only fires once the animation is completed
           if(options.changeText==1){
           $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
           }
            });
  
        return false;
  
      });
  
  };
  })(jQuery);
  </code></pre>
  
  <p>Now it is my believe that in this code, the form would automatically load, even if not shown. I could be wrong, please correct me if so.</p>
  
  <p><strong>Question</strong>, how can i make sure this iframe inside the div would only load when the div is no longer hidden?</p>