Hello, I'm looking for code that gives me a "read more" link at the end of a paragraph, which when clicked on, would automatically cause text below it to expand. I need something that degrades gracefully (works without javascript enabled). So if javascript is turned off, the text is automatically expanded. help is appreciated.
There are several "Read more" jQuery plugins around, but you can easily add the effect without them. Change .show(); to .slideDown('fast'); if you want the text to slide down instead. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head profile='http://gmpg.org/xfn/11'> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>Show More Demo</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function() { $('.showmore').hide(); $('.readmore').click(function() { $(this).next().show(); }); }); </script> <style type="text/css"> #container { margin: 0 auto; width: 600px; } .readmore { color: blue; cursor: pointer; } </style> </head> <body> <div id="container"> <h1>Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class='readmore'>Read more...</p> <p class='showmore'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </body> </html> HTML: