jquery-ui/demos/accordion/fillspace.html

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Accordion - FillSpace Demo</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3pre.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#accordion").accordion({
			header: "h3",
			fillSpace: true
		});
	});
	$(function() {
		$("#accordionResizer").resizable({
			resize: function() {
				$("#accordion").accordion("resize");
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

Resize the outer container:
<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">

<div id="accordion">
	<div>
		<h3><a href="#">Section 1</a></h3>
		<div>
			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
		</div>
	</div>
	<div>
		<h3><a href="#">Section 2</a></h3>
		<div>
			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
		</div>
	</div>
	<div>
		<h3><a href="#">Section 3</a></h3>
		<div>
			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
			</ul>
		</div>
	</div>
	<div>
		<h3><a href="#">Section 4</a></h3>
		<div>
			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
		</div>
	</div>
</div>

<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
</div><!-- End accordionResizer -->

<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>

</div><!-- End demo -->


<div class="demo-description">

<p>In this example, the fillSpace option is used to make the accordion fit within a specific height and/or width. The script will automatically set the dimensions of the accordion to the height of the parent container. Try re-sizing the outer box to see the accordion fill the height of the box.</p>
<pre><code>fillSpace: true
</code></pre>

</div><!-- End demo-description -->


</body>
</html>
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<title>jQuery UI Accordion - FillSpace Demo</title>`
removed default theme in favor of only one versioned css framework/TR theme - base 2009-01-07 02:36:51 +00:00			`<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />`
reverted r1544 (it was temporary) 2009-01-08 05:44:34 +00:00			`<script type="text/javascript" src="../../jquery-1.3pre.js"></script>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<script type="text/javascript" src="../../ui/ui.core.js"></script>`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<script type="text/javascript" src="../../ui/ui.resizable.js"></script>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<script type="text/javascript" src="../../ui/ui.accordion.js"></script>`
demos: moved the demos.css link down so it can override default theme styles. other minor updates. 2008-12-31 06:29:31 +00:00			`<link type="text/css" href="../demos.css" rel="stylesheet" />`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<script type="text/javascript">`
			`$(function() {`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`$("#accordion").accordion({`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`header: "h3",`
Accordion demos: Removed trailing commas. 2008-12-30 18:17:08 +00:00			`fillSpace: true`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`});`
Demos: Added missing semicolon. 2008-12-29 02:10:15 +00:00			`});`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`$(function() {`
accordion demo: resize accordion in fillSpace demo 2008-12-30 16:07:39 +00:00			`$("#accordionResizer").resizable({`
			`resize: function() {`
			`$("#accordion").accordion("resize");`
			`}`
			`});`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`});`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`</script>`
			`</head>`
			`<body>`

Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<div class="demo">`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00
Tweaks to sizing and language. 2008-12-30 18:05:37 +00:00			`Resize the outer container:`
			`<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">`
Tweaks to fillSpace page 2008-12-30 15:53:58 +00:00
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<div id="accordion">`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<div>`
			`<h3><a href="#">Section 1</a></h3>`
			`<div>`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`</div>`
			`</div>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<div>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<h3><a href="#">Section 2</a></h3>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<div>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`</div>`
			`</div>`
			`<div>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<h3><a href="#">Section 3</a></h3>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<div>`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<ul>`
			`<li>List item one</li>`
			`<li>List item two</li>`
			`<li>List item three</li>`
			`</ul>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`</div>`
			`</div>`
			`<div>`
Tweaked accordion content within demos. 2008-12-29 18:00:36 +00:00			`<h3><a href="#">Section 4</a></h3>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`<div>`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>`
accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00			`</div>`
			`</div>`
			`</div>`
Added gripper and extra panel to FIllSpace demo 2008-12-30 19:55:36 +00:00
FIxed gripper span width 2008-12-30 19:57:19 +00:00			`<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>`
Fixed typo. 2008-12-30 18:02:23 +00:00			`</div><!-- End accordionResizer -->`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00
Added gripper and extra panel to FIllSpace demo 2008-12-30 19:55:36 +00:00			`<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>`

Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00			`</div><!-- End demo -->`



			`<div class="demo-description">`

Set resize box to be less tall, added instructions. 2008-12-30 18:01:54 +00:00			`<p>In this example, the fillSpace option is used to make the accordion fit within a specific height and/or width. The script will automatically set the dimensions of the accordion to the height of the parent container. Try re-sizing the outer box to see the accordion fill the height of the box.</p>`
demos: added <code> inside <pre>. some other minor updates 2008-12-31 05:01:58 +00:00			`<pre><code>fillSpace: true`
			`</code></pre>`
Added wrapper divs for demo & description, made fillHeight demo use re-sizable 2008-12-30 15:38:43 +00:00
			`</div><!-- End demo-description -->`

accordion: Fixed #3682, setting overflow:auto for fillSpace:true accordions; added demo 2008-12-26 10:18:38 +00:00
			`</body>`
			`</html>`