codepaste

test

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head profile="http://gmpg.org/xfn/11"> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<title>GigglingCorpse - simple drawer example feat. jquery</title> 
	<META NAME="description" CONTENT="A javascript drawer"> 
	<META NAME="keywords" CONTENT="javascript, jquery, html, drawer, list"> 
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
		google.load("jquery", "1");	//we want jquery... 
		google.setOnLoadCallback(
			function() {
				$('dl.drawerify dt').click(
					function() {
						var new_one = $('dl.drawerify dt').index(this);
						if (selected == new_one) return;
						$('dl.drawerify dt:nth('+selected+')').removeClass('current');
						selected = new_one;
						$(this).addClass('current');
						show_info($(this).next('dd').html() );
					}
				);
				$('dl.drawerify dt:first').click();
			}
		);

var selected = -1;

function show_info( desc ) {
			var container = $('#info_container');
			if (container.html().length > 0) {
						
			  container.animate({
				width: "0px"
			  }, 300, "swing", function() { container.html(''); show_info( desc ); } );

} else {
				container.html("<div class=\"inner\">" + desc + "</div>");
				container.animate({
					width: "250px"
				}, 300, "swing" );

}
		}
	</script>
	<style>
		dl.drawerify, #info_container {
			height: 108px;
			background-color: #fff;
			padding: 10px;
		}
		dl.drawerify {
			width: 140px;
			float: left;
			margin: 0px;
		}
		dl.drawerify dt.current {
			color: #ffffff;
		}

dl.drawerify dd {
			display: none;
		}
		dl.drawerify dt {
			cursor: pointer;
			font-weight: bold;
			background: #324e63;
			color: #b3c4d2;
			font-family: arial, verdana;
			padding: 3px;
			padding-left: 10px;
			margin-bottom: 1px;
			font-size: 16px;
		}
		dl.drawerify dt:hover {
			background-color: #233544;
			
		}
		#info_container {
			width: 0px;
			float: left;
			overflow: hidden;
			font-family: verdana;
			font-size: 8pt;
			padding-left: 0px;
			color: #324e63;
		}
		#info_container .inner {
			width: 220px;
		}
		#info_container img {
			margin-right: 10px;
			float: left;
		}
		body {
			background-color: #EDEFF0;
		}
	</style>
</head>
<body>
<dl class="drawerify">
	<dt>A bird</dt> 
	<dd>
		<img src="images/thumb-bird.jpg">This is a picture of a bird sitting an a tree, and looking quite proud of that.
	</dd>
	
	<dt>A cave</dt> 
	<dd>
		<img src="images/thumb-cave.jpg">This is the description of the cave.. Tor lives here, and is a Zombie.
	
	</dd>
	
	<dt>A zombie</dt> 
	<dd>
		<img src="images/thumb-zombie.jpg">Poker was pretty popular for a while, even the zombies got into it.	
	</dd>

<dt>Bobby</dt> 
	<dd>
		<img src="images/thumb-bobby.jpg">This is a picture of bobby.  I actually have a giant version of this framed on a wall over to the right.	
	</dd>

</dl>
<div id="info_container"></div> 
</body>
</html>