title: <iframe> button to main
body: <p>I have this kind of code:</p>
  
  <p><strong><code>iframe.html</code>:</strong></p>
  
  <pre><code>&lt;div id="w"&gt;
  &lt;div id="a"&gt;
   ...
  &lt;/div&gt;
  &lt;div id="b" style="display:none"&gt;
   ...
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a href="#" id="button" class="b open"&gt;Change&lt;/a&gt;
  </code></pre>
  
  <p><strong><code>main.html</code>:</strong></p>
  
  <pre><code>...
  &lt;div id="con"&gt;
          &lt;iframe src="http://localhost/iframe.html" scrolling="no" id="myiframe"&gt;
              &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  &lt;div id="show" style="display:none"&gt;
  Hello WOrld!
  &lt;/div&gt;
  </code></pre>
  
  <p>My JavaScript inside the <code>&lt;iframe&gt;</code>:</p>
  
  <pre><code>$(document).ready(function() {
    $("a#button").click(function(){
      if ($(this).hasClass('open')) {
                  $(this).removeClass('open');
                  $(this).addClass('close');
                  $('#a').fadeOut(200);
                  $("#b").fadeIn(200);
   }else{
  $("a#button").css({"margin-top":""});
                  $(this).removeClass('close');
                  $(this).addClass('open');
                  $("#b").fadeOut(200);
                  $('#a').fadeIn(200);
  }
  
    });
  });
  </code></pre>
  
  <p>I try to insert this code in the <code>&lt;iframe&gt;</code> JavaScript:</p>
  
  <pre><code>....
   $("a#button").click(function(){
      $("#show").css({"display":"block", "background":"green"});
  ....
  }
  </code></pre>
  
  <p>However, it won't work because the JavaScript code is inside the <code>&lt;iframe&gt;</code> and it cannot see the <code>#show</code> <code>&lt;div&gt;</code>.</p>
  
  <p>Is there any way using JavaScript or jQuery that when I click the <code>#button</code> in the <code>&lt;iframe&gt;</code> that it will reflect the <code>#show</code> <code>&lt;div&gt;</code>?</p>