title: Jquery show/hide in another page
body: <p>I have 2 html page</p>
  
  <p><strong>in Page 1</strong> there is 2 links "link1" &amp; "link2"</p>
  
  <p><strong>in Page 2</strong> there is also 2 links "link1" &amp; "link2" as well as 2 <code>&lt;div id="pan1"&gt;</code> &amp; <code>&lt;div id="pan2"&gt;</code> <code>&lt;div id="pan1"&gt;</code></p>
  
  <p>&amp; <code>&lt;div id="pan2"&gt;</code> is working as show/hide with jquery</p>
  
  <p>I want when user click on the link1 in page1 it will go to page 2 and div"id=pan1" will show and when user click on the link2 in page1 it will go to page 2 and div"id=pan2" will show.</p>
  
  <p>here is the html code for page 1</p>
  
  <pre><code>&lt;ul class="linkList"&gt;
  &lt;li&gt;&lt;a href="#pan1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#pan2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>here is the code for page 2</p>
  
  <p>html</p>
  
  <pre><code>&lt;ul class="linkList"&gt;
  &lt;li&gt;&lt;a href="#pan1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#pan2"&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="pan1" class="switchgroup" style="padding:10px; background-color:#060"&gt;div 1&lt;/div&gt;
  &lt;div id="pan2" class="switchgroup" style="padding:10px; background-color:#936"&gt;div 2&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#pan1, #pan2{
      display:none;   
  }
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>$(document).ready(function(){
      $('#pan1').show();
      $('.linkList li:first-child a').addClass('active');
      $('.linkList li a').click(function() {
          var tabDivId = this.hash;                              
  
          $('.linkList li a').removeClass('active');
          $(this).addClass('active');
          //console.log(tabDivId);
          $('.switchgroup').hide();
          $(tabDivId).fadeIn();
          return false;
      });
  });
  </code></pre>