Expand and Collapse Content
There are several ways to design "Read More/Less" content on your page. This is merley one example.
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>
- 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!