Expand and Collapse Content
There are several ways to design "Read More/Less" content on your page. This is merley one example.
Let's pretend that this is a really really long article and you only want the first two lines (or so) to display initially, but want users to be able to "read more" if they want to and don't want them to have to leave the page.
Read more
Pretty cool! Here is how you do it. It is actually quite simple
- Put your entire HTML into the page just like you want it to look when it is expanded.
- Decide where you want to break your content up... that is, decide what you want to show initially, and what you want to be hidden. You can always change your mind later.
- Wrap the content you do not want to show up with a span tag, like this: <span id="restOfArticle" style="display:none">blah blah</span>
- At the end of your hidden content, add a "Read more" link, like this: <a onclick="showMoreOrLess(this,'restOfArticle');">Read more</a>
- And finally, add this function to the page (or your common javascript library file)
- The function does two things - 1: un-hides or hides the "bonusContent", and 2: updates the text of the hyperlink. Easy Peasy!
Note: If you plan on using this feature multiple times on the same page, each section of hidden code needs to have a different ID on it!