title: Change DIV based on clicked TAB
body: <p>I am doing a leaderboard for a website we are working on.</p>
  
  <p>Essentially, we have a div with this months winner for location A</p>
  
  <p>Below we have ajax tabs, where user can click tabs which relate to locations, like :</p>
  
  <p>Location A
  Location B
  etc etc</p>
  
  <p>So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...</p>
  
  <p>I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the  tab the user clicks.</p>
  
  <p>So the content div is like:</p>
  
  <pre><code>&lt;div id="???"&gt; content goes here &lt;/div&gt;
  </code></pre>
  
  <p>The tabs are like:</p>
  
  <pre><code>&lt;ul class="tabs"&gt; 
                      &lt;li&gt;&lt;a href="#tab1"&gt;&lt;span class="stateTab"&gt;NSW&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab2"&gt;&lt;span class="stateTab"&gt;QLD&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab3"&gt;&lt;span class="stateTab"&gt;VIC&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab4"&gt;&lt;span class="stateTab"&gt;SA&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab5"&gt;&lt;span class="stateTab"&gt;WA&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab6"&gt;&lt;span class="stateTab"&gt;ACT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab7"&gt;&lt;span class="stateTab"&gt;NT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#tab8"&gt;&lt;span class="stateTab"&gt;TAS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/leaderboard/australia/"&gt;&lt;span class="stateTab"&gt;AUSTRALIA&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt; 
  </code></pre>
  
  <p>So if user clicks #tab2 then a different DIV loads into the div id="???" .</p>
  
  <p>I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:</p>
  
  <pre><code>&lt;div id="tab1"&gt; content goes here &lt;/div&gt;
  &lt;div id="tab2"&gt; content goes here &lt;/div&gt;
  &lt;div id="tab2"&gt; content goes here &lt;/div&gt;
  </code></pre>
  
  <p>And set visibility hidden to the divs.. any help appreciated.</p>
  
  <p><em><strong></em>***<em></strong> ADDED INFO <strong></em>**<em>*</em>****</strong></p>
  
  <p>The tabs, onclick ( presently ) display content from dataTables.
  So obviously when we click on tab1, the content below the tabs , shows the content fetched from our dataTables, in a div with id1</p>
  
  <p>The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...</p>
  
  <p>The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony</p>