jQuery Tabs - change content outside of tab when tab is loaded
<p>I've been looking around and I can't seem to figure out how to do this. Basically my setup is this:</p>

<pre><code>&lt;script&gt;
    $(function() {
        $( ".tabs" ).tabs();

    });

&lt;/script&gt;

&lt;div class="tabs"&gt;
&lt;div class="Content"&gt;

&lt;div id="tab-image1"&gt;   
    &lt;div class="plusIcon"&gt;&lt;/div&gt;&lt;img src="attachments/images/testImage.jpg" width="255" height="283" alt="Test Image" /&gt;
    &lt;div class="description"&gt;
        Info
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="tab-image2"&gt;   
    &lt;div class="plusIcon"&gt;&lt;/div&gt;&lt;img src="attachments/images/testImage2.jpg" width="255" height="283" alt="Test Image" /&gt;
    &lt;div class="description"&gt;
        Info
    &lt;/div&gt;
&lt;/div&gt;      

&lt;/div&gt; &lt;!-- end .Content --&gt;

&lt;div class="Nav"&gt;

&lt;ul&gt;
&lt;li class="text"&gt;Select a cartoon:&lt;/li&gt;
&lt;li&gt;&lt;a href="#tab-image1"&gt;&lt;img src="attachments/images/testThumbnail.jpg" width="71" height="71" alt="Test Thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#tab-image2"&gt;&lt;img src="attachments/images/testThumbnail2.jpg" width="71" height="71" alt="Test Thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt; &lt;!-- end .Nav --&gt;

&lt;/div&gt; &lt;!-- end .tabs --&gt;

&lt;div class="Container" id="uptEPT"&gt;

&lt;div class="Header"&gt;

&lt;div class="uptTitle"&gt;&lt;/div&gt;
&lt;div class="number"&gt;3&lt;/div&gt;
&lt;div class="title"&gt;         

&lt;div class="plusIcon"&gt;&lt;/div&gt;&lt;img id="replace" src="attachments/images/testThumbnail.jpg" width="71" height="71" alt="Test Thumbnail" /&gt;

&lt;/div&gt;  

&lt;/div&gt; &lt;!-- end .Header --&gt;
&lt;/div&gt; &lt;!-- end .Container --&gt;
</code></pre>

<p>What I want to do is when I click on tab-image1 or 2 then the thumbnail in sectionHeader also gets changed. Is this possible?</p>

<p>Thank you.</p>
