	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html>
	<head>
	<title>jQuery Accordion Example</title>

	<style type="text/css">
	/* A few IE bug fixes */
	* { margin: 0; padding: 0; }
	* html ul ul li a { height: 100%; }
	* html ul li a { height: 100%; }
	* html ul ul li { margin-bottom: -1px; }

	body { padding-left: 10em; font-family: Arial, Helvetica, sans-serif; }
	#theMenu { width: 200px; height: 350px; margin: 30px 0; padding: 0; }

	/* Some list and link styling */
	ul li { width: 200px; }
	ul ul li { border-left: 25px solid #69c; padding: 0; width: 175px; margin-bottom: 0; }
	ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
	ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
	/* For the xtra menu */
	ul ul ul li { border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
	ul ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
	ul ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }


	li { list-style-type: none; }
	h2 { margin-top: 1.5em; }

	/* Header links styling */
	h3.head a {
	color: #333;
	display:block;
	border-top: 1px solid #36a;
	border-right: 1px solid #36a;
	background: #ddd url(down.gif) no-repeat;
	background-position: 98% 50%;
	padding: 3px 6px;
	}
	h3.head a:hover {
	color: #000;
	background: #ccc url(down.gif) no-repeat;
	background-position: 98% 50%;
	}
	h3.selected a {
	background: #69c url(up.gif) no-repeat;
	background-position:98% 50%;
	color: #fff;
	padding: 3px 6px;
	}
	h3.selected a:hover {
	background: #69c url(up.gif) no-repeat;
	background-position:98% 50%;
	color: #36a;
	}

	/* Xtra Header links styling */
	h4.head a {
	color: #333;
	display:block;
	border-top: 1px solid #36a;
	border-right: 1px solid #36a;
	background: #eee url(down.gif) no-repeat;
	background-position: 98% 50%;
	padding: 3px 6px;
	}
	h4.head a:hover {
	color: #000;
	background: #ddd url(down.gif) no-repeat;
	background-position: 98% 50%;
	}
	h4.selected a {
	background: #6c9 url(up.gif) no-repeat;
	background-position:98% 50%;
	color: #fff;
	padding: 3px 6px;
	}
	h4.selected a:hover {
	background: #6c9 url(up.gif) no-repeat;
	background-position:98% 50%;
	color: #36a;
	}
	</style>

	</head>
	<body>
	<h1>jQuery Accordion Example</h1>

	<h2>A Navigation Menu</h2>
	<p>Unordered List with anchors and nested lists. Title 2 also demonstrates how to add a second level list.<br />Take a look at the source code to see how easy it's done!</p>
	<p><a href="index.php">The original example is found here</a>.</p>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="accordion.js"></script>
	<script type="text/javascript">
	jQuery().ready(function(){
	// applying the settings
	jQuery('#theMenu').Accordion({
	active: 'h3.selected',
	header: 'h3.head',
	alwaysOpen: false,
	animated: true,
	showSpeed: 400,
	hideSpeed: 800
	});
	jQuery('#xtraMenu').Accordion({
	active: 'h4.selected',
	header: 'h4.head',
	alwaysOpen: false,
	animated: true,
	showSpeed: 400,
	hideSpeed: 800
	});
	});
	</script>

	<ul id="theMenu">
	<li>
	<h3 class="head"><a href="javascript:;">Title 1</a></h3>
	<ul>
	<li><a href="index-multi.php">Content 1 1</a></li>
	<li><a href="index-multi.php">Content 1 2</a></li>
	<li><a href="index-multi.php">Content 1 3</a></li>
	</ul>
	</li>
	<li>
	<h3 class="head"><a href="javascript:;">Title 2</a></h3>
	<ul>
	<li>
	<ul id="xtraMenu">
	<li>
	<h4 class="head"><a href="javascript:;">Content xtra 2 1a</a></h4>
	<ul>
	<li><a href="index-multi.php">Content 2 1 1</a></li>
	<li><a href="index-multi.php">Content 2 1 2</a></li>
	<li><a href="index-multi.php">Content 2 1 3</a></li>
	</ul>
	</li>
	<li>
	<h4 class="head"><a href="javascript:;">Content xtra 2 1b</a></h4>
	<ul>
	<li><a href="index-multi.php">Content 2 2 1</a></li>
	<li><a href="index-multi.php">Content 2 2 2</a></li>
	<li><a href="index-multi.php">Content 2 2 3</a></li>
	</ul>
	</li>
	</ul>
	</li>
	<li><a href="index-multi.php">Content 2 2</a></li>
	<li><a href="index-multi.php">Content 2 3</a></li>
	</ul>
	</li>
	<li>
	<h3 class="head"><a href="javascript:;">Title 3</a></h3>
	<ul>
	<li><a href="index-multi.php">Content 3 1</a></li>
	<li><a href="index-multi.php">Content 3 2</a></li>
	<li><a href="index-multi.php">Content 3 3</a></li>
	</ul>
	</li>
	<li>
	<h3 class="head"><a href="javascript:;">Title 4</a></h3>
	<ul>
	<li><a href="index-multi.php">Content 4 1</a></li>
	<li><a href="index-multi.php">Content 4 2</a></li>
	<li><a href="index-multi.php">Content 4 3</a></li>
	</ul>
	</li>
	<li>
	<h3 class="head"><a href="javascript:;">Title 5</a></h3>
	<ul>
	<li><a href="index-multi.php">Content 5 1</a></li>
	<li><a href="index-multi.php">Content 5 2</a></li>
	<li><a href="index-multi.php">Content 5 3</a></li>
	</ul>
	</li>
	</ul>

	<p>Here's some text to show that the height (350px) for "theMenu" doesn't affect the following text...<br />
	You don't really need it but you can...</p>

	</body>
	</html>