title: Displaying div from other html file on button click
body: <p>I have <a href="http://jsfiddle.net/49zCs/" rel="nofollow">this code</a> :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;body&gt;
      &lt;div id=div1 style="display:block;"&gt;
          &lt;p id="intro"&gt;Hello World!&lt;/p&gt;
          &lt;p&gt;This example demonstrates the &lt;b&gt;getElementById&lt;/b&gt; method!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id=div2 style="display:none;"&gt;
          &lt;p id="intro"&gt;Hello World again!&lt;/p&gt;
          &lt;p&gt;This example demonstrates the &lt;b&gt;getElementById&lt;/b&gt; method!&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type="button" onclick="func()"&gt;Change div&lt;/button&gt;
      &lt;script&gt;
          function func() {
              x = document.getElementById("div1");
              x.style.display = "none";
              x1 = document.getElementById("div2");
              x1.style.display = "block";
          }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It basically displays div2 on button click.</p>
  
  <p>This works fine when div2 and div1 are in same file. I want div2 to be in different file and be displayed when we click the button <strong>without changing the url</strong>. </p>
  
  <p>One way to achieve this is by using iframes and changing the url(in which div2 is there) of iframe on button click.</p>
  
  <p>Is there any other way to achieve this? </p>
  
  <p>I am very new to html and javascript so an explation with answer will help a lot. Thanks!</p>