Dynamically show/hide divs with jQuery
<p>I currently have jquery Cycle running on a page, but not only find it bulky but it's messing with the rest of my page. I'm writing a simple script to make it obsolete for my purposes, which will take the href of a menu item that is clicked, show the div that pertains to it, while hiding all others.</p>

<p>jsFiddle: <a href="http://jsfiddle.net/THuST/" rel="nofollow">http://jsfiddle.net/THuST/</a></p>

<p><strong>HTML</strong> (Ignore the fact that I've used <code>&lt;ul&gt;</code> for just one <code>&lt;li&gt;</code> element - there are heaps more that will go in there but for simplicity I've omitted them)</p>

<pre><code>&lt;div id="adSlideshow"&gt;
    &lt;div class="adSlideBox current" id="red"&gt;
        &lt;ul class="gallery" id="redGallery"&gt;
            &lt;li&gt;&lt;img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="adSlideBox" id="yellow"&gt;
        &lt;ul class="gallery" id="yellowGallery"&gt;
            &lt;li&gt;&lt;img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="adSlideBox" id="blue"&gt;
        &lt;ul class="gallery" id="blueGallery"&gt;
            &lt;li&gt;&lt;img src="http://i.imgur.com/WyDQI.png" alt="" title=""/&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;ul id="menu" style="list-style:none"&gt;
    &lt;li&gt;&lt;a href="#asics"&gt;RED&lt;/a&gt;&lt;/li&gt;
    &lt;span&gt;\&lt;/span&gt;
    &lt;li&gt;&lt;a href="#plants"&gt;YELLOW&lt;/a&gt;&lt;/li&gt;
    &lt;span&gt;\&lt;/span&gt;
    &lt;li&gt;&lt;a href="#tooheys"&gt;BLUE&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.adSlideBox {display:none;}
.adSlideBox.current {display:block;}

img {max-width:350px; max-height:350px}

#menu li {float:left; margin-left:2em}
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(".adslidebox a[href=" + link + "]");
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });
</code></pre>

<p>This is my first try at making a script from scratch, so please bear with me. I think I'm <strong>relatively</strong> close; the <code>.current div</code> fades out successfully, however the selected div doesn't fade in, and the <code>.current</code> class isn't toggled.</p>
