O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Saving space on our site: the "more" button that shows more with a transition

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.

Getting ready

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; }
...

How to do it...

Set a listener on the DIV, which starts out as reading More on screen. Toggle that text to and from ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required