Tuesday, January 19, 2010

Toggle content with a "Read more" / "Close" link

I wanted a simple effect we've seen a hundred times. The first paragraph of a long article, followed by a "Read more..." link, that when pressed, slides more of the article into view and simmulatenously changes the link to read "Close". Naturally, clicking "Close" slides the content back out of view.
Everything I found didn't perform both these functions or was buggy; so I wrote this using JQuery.

You can see a stand-alone demo here.

The link to JQuery on Google's servers:


The JQuery code:


The css:


The Articles section:



P.S. Thanks to http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html for the code highlighting script.