How to show the overflow:hidden content using jQuery / JS when a user clicks on an image?

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.

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

As you can see on http://jsfiddle.net/BLUzJ/ I have set a max-height and overflow:hidden if the cont开发者_运维百科ent of post preview is more than this. 95% of the post previews have a lot of text hidden.

For now the max-height is set to 10.3em as below

#text {
    max-height:10.3em;
    overflow:hidden;
}

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.

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.

Thank you for your ideas and examples.

Using jquery, since you added that tag: http://jsfiddle.net/r4F8Q/3/

• added an element with class .toggle, which could be your icon
• added css rule for #text.expanded which removed max-height
• jquery adds/removes class expanded from element #text

Here is a starting fiddle. It expands on clicking the text. You would obviously have to do some more work to have a trigger that expands/collapses the section.

http://jsfiddle.net/BLUzJ/10/

To show all of the content of the post, you can set the max-height of the element whose icon has been clicked to auto. Once you get a hold of the element that you wish to expand (either by using document.getElementById("id") or by traversing the DOM), you can set this property by doing the following:

x.style.maxHeight = "none";

You can set this as the onclick event for the expand icon, if you wish. Do note that this will not animate the expansion; for that you should probably use something like jQuery.

EDIT: Updated the jsFiddle with a simple example, which expands when the title is clicked. http://jsfiddle.net/BLUzJ/6/