Show/hide divs with same class
<p>I have four images and four divs. When image 1 is clicked, div 1 should appear and all others should be hidden, etc. Each div has the same class name.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
&lt;title&gt;Untitled 1&lt;/title&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(window).load(function(){
        $(".DataList").hide();
        $(".DataList:first").show();    
        $(".trigger").click(function() {
            $(".DataList").hide();
            $(".DataList").eq($(this).index()).show();
        });
    });
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="LinkBar"&gt;
    &lt;table border="0"&gt;
        &lt;tr&gt;
            &lt;td&gt;
               &lt;a class="trigger" href="#"&gt;&lt;img src="Package1.gif" /&gt;&lt;/a&gt; &lt;/td&gt;
            &lt;td&gt;
               &lt;a class="trigger" href="#"&gt;&lt;img src="Package2.gif" /&gt;&lt;/a&gt; &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;div class="DataList"&gt;
    &lt;div class="Description"&gt;
        &lt;ul class="Package"&gt;
            &lt;li&gt;Item 1&lt;/li&gt;
            &lt;li&gt;Item 2&lt;/li&gt;
            &lt;li&gt;Item 3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="Hidden"&gt;
            1 &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="DataList"&gt;
    &lt;div class="Description"&gt;
        &lt;ul class="Package"&gt;
            &lt;li&gt;Item 1&lt;/li&gt;
            &lt;li&gt;Item 2&lt;/li&gt;
            &lt;li&gt;Item 3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="Hidden"&gt;
            2 &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>
