Show hide elements on anchor click in a different container
<p>I need to show a bunch of different flash banners. best I can figure is to hide them all, then show when the title is clicked</p>

<pre><code>&lt;!-- list that holds links --&gt;
&lt;ul id="bannerList" class="list"&gt;
    &lt;li&gt;Type
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Flash banner1 120x600&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;Other Type
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Flash banner2 120x600&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;div id="bannerTarget"&gt;
    &lt;div class="vert"&gt;alpha&lt;/div&gt;
    &lt;div class="horiz"&gt;one&lt;/div&gt;
    &lt;div class="horiz"&gt;two&lt;/div&gt;
    &lt;div class="horiz"&gt;three&lt;/div&gt;
    &lt;div class="horiz"&gt;four&lt;/div&gt;
&lt;/div&gt;

#bannerTarget .vert {
width: 120px;
height: 600px;
margin: 0 auto;
float: left;
display: none;
}

#bannerTarget .horiz {
width: 728px;
height: 90px;
margin: 0 auto;
float: left;
display: none;
}
</code></pre>

<p>I dont want to write a click function for each link to show it's corresponding div, how would I make the function more utilitarian? I'm having issues connecting a link to it's appropriate div</p>

<pre><code>$("ul#bannerList li a").click(function(e) {
    e.preventDefault();
    $parent.addClass("selected").siblings().removeClass("selected");
    var href = $(this).attr('href');
    $href.css("display","block");
});
</code></pre>

<p>This doesn't work...any ideas?</p>
