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 "Less" and the height of the outer DIV based on the initialized height of the outer element. This initial height must match that used in the style .news_outer.
var news_outer_ht = 40;
$$('.more_news').addEvent('click',function() {
var el = this...