jQuery custom slider query
<p>I had someone from this site help me out with a slider problem I was having and I just need someone to help me with the final piece of the puzzle.</p>

<p>This is the Fiddle <a href="http://jsfiddle.net/gajjuthechamp/vrqdh/2/" rel="nofollow">http://jsfiddle.net/gajjuthechamp/vrqdh/2/</a></p>

<p>At the moment when you click on the "thumbnail" the content appears in the main div above.</p>

<p>I need the divs/thumbnails under "extraContent" have it's own unique content div under "mainContent".</p>

<p>Hope this makes sense.</p>

<p>Thanks</p>

<p>jQuery:</p>

<pre><code>$(function(){
  $("#parent").on("click", ".extraContent div", function(){
       newHtml=$(this).html();
       $("#parent").find(".mainContent p").fadeOut(1000,function(){
              $(this).parent().html(newHtml);
              $(this).parent().fadeIn(1000);
       });
    });
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="parent"&gt;
    &lt;div class="mainContent"&gt; &lt;p&gt;This is the default Text&lt;/p&gt;&lt;/div&gt;
    &lt;div class="extraContent"&gt;
        &lt;div&gt;&lt;p&gt;test and Image Goes hear for 1 div&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;test and Image Goes hear for 2 div&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;test and Image Goes hear for 3 div&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;test and Image Goes hear for 4 div&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#parent { width:400px; margin:auto}
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; }
.extraContent {overflow:auto; width:450px;}
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px }
.extraContent div:hover { border:1px solid #0F0;cursor:pointer }
</code></pre>
