If your page content is getting lengthy or you just want to add some interactivity to your site, consider expandable/collapsible content. We can leverage the JavaScript toolkit, jQuery to make this process painless.
The HTML
<div class="expandable">
<h3>See this content?</h3>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<ul>
<li>This is a list</li>
</ul>
</div>
The JavaScript / jQuery
$('.expandable').children().not('h3').hide();
$('.expandable').children('h3').prepend('<span>+</span>');
$('.expandable').children('h3').click(function() {
$(this).siblings().slideToggle('fast');
$(this).parent().toggleClass('expanded');
($(this).children('span').html() == '+') ?
$(this).children('span').html('-') :
$(this).children('span').html('+');
});
The CSS
.expandable h3 { cursor: pointer; }
.expandable h3 span {
display: block;
float: left;
width: 10px;
margin-left: -10px;
color: #a00;
}
.expanded { // whatever styles you like (applied when element is "expanded") }