Question

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 content 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.

Answer 1

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