percentage.html

﻿<!DOCTYPE html>
<html lang="en-US">
	<head>
		<title>zAccordion Percentage Example</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script src="js/jquery.zaccordion.js"></script>
		<style type="text/css">
			/* Just some styles to set the page layout. */
			* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
			body {padding:0;line-height:20px;font-size:12px;color:#000;}
			h1 {font-size:18px;margin:10px 0;line-height:1;}
			h2 {font-size:14px;margin:10px 0;line-height:1;}
			p {font-size:12px;margin:10px 0;}
			small {font-size:11px;margin:10px 0;color:#333;}
			a {font-size:12px;text-decoration:none;color:#f00;}
			p span {color:#00f;}
			#container {width:960px;margin:0 auto;padding-bottom:40px;}
			#examples {margin-top:60px;}
			pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
			pre.html {margin:10px 0;}
			.clear {clear:both;}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#example14").zAccordion({
					tabWidth: "15%",
					width: "100%",
					height: "100%"
				});
				$(window).resize(function() {
					$("#example14").height($(window).height());
					$("#example14 li").height($(window).height());
					$("#example14 img").height($(window).height());
				});
			});
		</script>
	</head>
	<body>





			<ul id="example14">
				<li><img src="images/slide0.gif" width="100%" height="100%" alt="" /></li>
				<li><img src="images/slide1.gif" width="100%" height="100%" alt="" /></li>
				<li><img src="images/slide2.gif" width="100%" height="100%" alt="" /></li>
				<li><img src="images/slide3.gif" width="100%" height="100%" alt="" /></li>
				<li><img src="images/slide4.gif" width="100%" height="100%" alt="" /></li>
			</ul>





	</body>
</html>