The first tab is done ... css and html for tabs

by Lucille Kenney

HTML

<h2> Change the hard coded active states to interactive states with javascript</h2>
    <aside class="tabs">
			<div id="categories">
				<h2>Styles &amp; Categories</h2>
				<h3 class="active">Nature</h3>
				<ul class="active">
					<li>Landscapes</li>
					<li>Seasons</li>
					<li>Floral &amp; Botanical</li>
					<li>Insects &amp; Arachnids</li>
					<li>Australian Wildlife</li>
					<li>African Wildlife</li>
					<li>Asian Wildlife</li>
					<li>The Wild Oceans</li>
				</ul>
				<h3>Maps</h3>
				<ul>
					<li>Cities</li>
					<li>States</li>
					<li>North America</li>
					<li>South America</li>
					<li>Europe</li>
					<li>Asia</li>
					<li>Africa</li>
					<li>Vintage: Explorers series</li>
				</ul>
				<h3>Space</h3>
				<ul>
					<li>Stars</li>
					<li>Constellations</li>
					<li>Planets</li>
					<li>Saturn by Cassini</li>
					<li>Hubble's Greatest Hits</li>
				</ul>
			</div>
		</aside>

CSS

/* Categories sidebar */
.tabs { 
	width: 300px;
	float: right;
}

#categories {
	padding: 50px 20px;
}

#categories h3 {
	padding-top: 4px;
}

#categories ul {
	list-style-type: none;
	padding: 4px 8px;
}

#categories li {
	cursor: pointer; /* ahem fake links */
	margin-bottom: 4px;
}

/* Neat trick for custom bullet points */
#categories ul > li:before {
	content: "»";
	margin-right: 4px;
}

/* Tabbification */

#categories h3 {
	float: left;
	padding: 4px;
	margin-right: 3px;
	border: 1px solid black;
	border-bottom-width: 0px;
	background-color: #EEE;
	cursor: pointer;
}
#categories h3.active {
	background-color: transparent;
}
#categories ul {
	display: none;
	position: absolute;
	margin-top: 34px;
	border: 1px solid black;
	width: 240px;
}
#categories ul.active {
	display: block;
	position: absolute;
	margin-top: 48px;
	border: 1px solid black;
	width: 240px;
}

JavaScript

$(document).ready(function(){
    //immediate children of h3
    var $tabs = $('#categories > h3');
    var $contents = $('#categories > ul');
    //Set up click handler
    $($tabs[0]).click(function(){
        $tabs.removeClass('active');
        $($tabs[0]).addClass('active');
        $contents.removeClass('active');
        $($contents[0]).addClass('active');
    });

});