How do I show a hidden div using jQuery Toggle?
<p>I have a portfolio section I am building on a page that displays a thumbnail of an image. I also have a hidden div that contains information about the portfolio project that I would like to show when a user mouses over the thumbnail.</p>

<p>Here is the HTML:</p>

<pre><code>&lt;div class="portfolio"&gt;
    &lt;a href="#"&gt;&lt;img src="photos/work_2.jpg" alt="work_1" width="181" height="180"&gt;&lt;/a&gt;
    &lt;div class="portfolio-overlay" style="display:none;"&gt;
        &lt;p class="client-name"&gt;Encore Azalea&lt;/p&gt;
        &lt;div class="white-line"&gt;&lt;/div&gt;
        &lt;p class="services"&gt;website redesign +&lt;br /&gt;mobile site launch&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is the jQuery:</p>

<pre><code>&lt;script&gt;
$(".portfolio a").hover(function () {
$(".portfolio-overlay").toggle("slow");
});
&lt;/script&gt;
</code></pre>

<p>My intent is to display .portfolio-overlay when you mouse over the image and hide it when you mouse out. </p>

<p>I know there is something missing with the jQuery but, if I knew what it was, I wouldn't be posting this (you know how it goes).</p>

<p>Thanks.</p>
