How to show the overflow:hidden content using jQuery / JS when a user clicks on an image?
<p>I am building a feed reader and on my first page I show a lot of post previews. A user has the option to click on the title and visit the source link.</p>

<p>In addition I would like to give them the option to click on a small icon, like a plus sign <code>+</code> to view the rest of the post preview in my page.</p>

<p>As you can see on <a href="http://jsfiddle.net/BLUzJ/" rel="nofollow">http://jsfiddle.net/BLUzJ/</a> I have set a <code>max-height</code> and <code>overflow:hidden</code> if the content of post preview is more than this. 95% of the post previews have a lot of text hidden.</p>

<p>For now the max-height is set to 10.3em as below</p>

<pre><code>#text {
    max-height:10.3em;
    overflow:hidden;
}
</code></pre>

<p>When an icon in the post (I guess there will be in a corner of the post preview) is clicked, the max-height changes to allow user to read the rest.</p>

<p>My application is written in PHP, and I get the title, image, content from RSS feeds.
I think that this is a jQuery, JavaScript solution but I do not know how to do it.</p>

<p>Thank you for your ideas and examples.</p>
