July 2011
Intermediate to advanced
276 pages
5h 11m
English
The "more" link is a frequently used space saver. More frequently than not, it links to another page with a clunky HTTP refresh. In this recipe, we see how to save the space and keep the data on the page, for both the search engines and our users.
We start with an outer DIV that hides overflow and has styles that limit the height. Putting the actual text within an inner DIV will allow us to pick up the natural, auto-height of the element based on its text.
<style type="text/css">
.news_outer { height:40px; width:400px; overflow:hidden; }
...
Set a listener on the DIV, which starts out as reading More on screen. Toggle that text to and from ...