jQuery on image click reveal text desc in div
<p>I have created a page that lists a group on thumbs on the right hand side of the page. When an thumb is clicked the relevant image is shown in a div to its left. Now I am trying to show the images description that matches said image.
So far my working is as follows;</p>

<p>jQuery//</p>

<pre><code>&lt;!-- Swap portfolio image on click --&gt;
$("ul.thumbs li a").click(function() { 
var mainImage = $(this).attr("href"); //Find Image Name
$(".work_two_third_column_copy img").attr({ src: mainImage });
return false;  
});

&lt;!-- Get image description on click --&gt;
$("ul.thumbs li a").click(function () {
var tip = $(this).css("visibility:visible");
$(".one_sixth_column_copy .work_info").html("");
});
</code></pre>

<p>HTML//</p>

<pre><code>&lt;div class="work_two_third_column_copy"&gt;
&lt;a href=""&gt;&lt;img src="main_image1.gif"&gt;&lt;/a&gt;
&lt;/div&gt;&lt;!-- End .work_two_third_column_copy --&gt;


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

&lt;div class="one_sixth_column"&gt;
&lt;div class="one_sixth_column_copy"&gt;
&lt;div class="work_info"&gt;&amp;nbsp;&lt;/div&gt;&lt;!-- End Image Information --&gt;
&lt;/div&gt;&lt;!-- End .one_sixth_column_copy --&gt;
&lt;/div&gt;&lt;!-- End .one_sixth_column --&gt;

&lt;div class="one_sixth_column_thumbs"&gt;
&lt;ul class="thumbs"&gt;
&lt;li&gt;&lt;a href="main_image1.gif"&gt;&lt;img src="1.gif"&gt;&lt;span class="tip"&gt;number one desc&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="main_image2.gif"&gt;&lt;img src="2.gif"&gt;&lt;span class="tip"&gt;number two desc&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="main_image3.gif"&gt;&lt;img src="4.gif"&gt;&lt;span class="tip"&gt;number three desc&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="main_image4.gif"&gt;&lt;img src="5.gif"&gt;&lt;span class="tip"&gt;number four desc&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;!-- ul.thumbs --&gt;
&lt;/div&gt;&lt;!-- End .one_sixth_column_thumbs --&gt;

&lt;/div&gt;&lt;!--End .one_third_column_right --&gt;
</code></pre>

<p>So far when I click the thumb the images show up fine and so I thought I could use the same sort of principles to get a similar effect. 
I have set the thumbs at a fixed width so the span does not show on the page but I still made the span visibility:hidden; just to be sure.</p>

<p>Any suggestions, it has been a while since I coded in jQuery so if it looks rough anywhere criticism is welcome.</p>

<p>Thanks,
Chris</p>
