Show/Hide page sections (jQuery, CSS, HTML)

sections.css

div#page-menu {
	float: left;
	width: 250px;
	margin: 0;
}

div#page-menu ul {
	border: 2px solid #ccc;	
	border-top: none;
	padding: 0; 
}

div#page-menu ul li {
	list-style: none;
	margin: 0;
	border-top: 1px dotted #bbb;
}

div#page-menu ul li:first-child {
	border-top: 2px solid #ccc;
}

div#page-menu ul li a span {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #1373A9;
}

div#page-menu ul li a {
	font-size: 12px;
	display: block;
	padding: 10px;
	color: #777;
	text-shadow: 1px 1px 0px #fff;
}

div#page-menu ul li a:hover {
	text-decoration: none;
	color: #111;
	background: #f5f5f5 url(arrow-right.png) no-repeat 95% 50% !important;
}

div#page-menu ul li a:hover span {
	font-style: normal;
}

div#page-menu ul li a.current {
	background: #eee url(arrow-right.png) no-repeat 95% 50% !important;
}

div#page-content {
	width: 650px;
	float: right;
}            


.section { display: none; overflow: hidden; }

.section.current { display: block; }

sections.html

<!--
//------------------------------------------------------------------------------
// Step 1: Add the "page menu" (this is the submenu, or sidebar)
//------------------------------------------------------------------------------		
-->

<div id="page-menu">
	<ul>
		<li>
			<a id="section1" href="#section1">
				<span>Section 1</span>
				This is a link to the first section
			</a>
		</li>
		<li>
			<a id="section2" href="#section2">
				<span>Section 2</span>
				This is a link to the second section
			</a>
		</li>
	</ul>
</div>
<!-- end page menu -->


<!--
//------------------------------------------------------------------------------
// Step 2: Create the individual page sections
//
// The ID for each "section" is the same as the href of the link that is used to show it, 
// with a "s_" added to the beginning. The ID should also match the href. 
// For example:
// 
// <a id="foo" href="#foo">Link</a>
// 
// <div class="section" id="s_foo">
//   ...
// </div>
//------------------------------------------------------------------------------
-->

<div id="page-content">

	<div class="section current" id="s_section1">
		... Content for Section 1 ...
	</div>
	<!-- end section 1 -->

	<div class="section" id="s_section2">
		... Content for Section 2 ...
	</div>
	<!-- end section 2 -->


</div>
<!-- end page-content -->

sections.js

$(function() {

    //----------------------------------------------------------------------------	
    // Change page "sections" when the menu item is clicked
    //----------------------------------------------------------------------------	
    $('#page-menu ul li a').click(function(){
        var el = $(this);
        if( !el.hasClass('current') ) {

            // get the id of the section to show
            var hash = $(this).attr('href');
            var sec = hash.replace('#', '');
            
            window.location = hash;
            
            // hide the currently showing section
            $('.section.current').slideUp(300, function(){
                $(this).removeClass('current');
                $('#s_' + sec).slideDown(300, function(){
                    $(this).addClass('current');
                });
            });
            $('#page-menu ul li a.current').removeClass('current');
            el.addClass('current');
        }
        return false;
    });
      
    
    //------------------------------------------------------------------------------
    // Show a page section based on the URL hash
    //------------------------------------------------------------------------------
    if( window.location.hash != '' ) {
    
        // see if there is a link ID to match our hash
        var el = $(window.location.hash);
        if( el.length > 0 ) {
            el.click();
        }
    }
    
 
});

You can find the image referenced in the CSS (arrow-right.png) here: http://imgur.com/7MT7F