/gist:5986

## gistfile1.php
<?php error_reporting(E_ALL); include("../../assets/includes/functions.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>jQuery UI Accordion</title>

	<link rel="stylesheet" href="demo.css" />

	<script type="text/javascript" src="../lib/jquery.js"></script>
	<script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>

	<script type="text/javascript" src="../lib/jquery.easing.js"></script>
	<script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="../jquery.accordion.js"></script>

	<script type="text/javascript">
	jQuery().ready(function(){
		// simple accordion
		jQuery('#list1a').accordion();
		jQuery('#list1b').accordion({
			autoheight: false
		});

		// second simple accordion with special markup
		jQuery('#navigation').accordion({
			active: false,
			header: '.head',
			navigation: true,
			event: 'mouseover',
			fillSpace: true,
			animated: 'easeslide'
		});

		// highly customized accordion
		jQuery('#list2').accordion({
			event: 'mouseover',
			active: '.selected',
			selectedClass: 'active',
			animated: "bounceslide",
			header: "dt"
		}).bind("change.ui-accordion", function(event, ui) {
			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
		});

		// first simple accordion with special markup
		jQuery('#list3').accordion({
			header: 'div.title',
			active: false,
			alwaysOpen: false,
			animated: false,
			autoheight: false
		});

		var wizard = $("#wizard").accordion({
			header: '.title',
			event: false
		});

		var wizardButtons = $([]);
		$("div.title", wizard).each(function(index) {
			wizardButtons = wizardButtons.add($(this)
			.next()
			.children(":button")
			.filter(".next, .previous")
			.click(function() {
				wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
			}));
		});

		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');

		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>

</head>
<body>

<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/">jQuery accordion Plugin</a> Demo</h1>
<div id="main">

	<fieldset>
		<legend>Standard, container is a div, header is h3 and content div and nested p</legend>

		<h3>Code</h3>
		<pre><code class="mix">jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
	autoheight: false
});</code></pre>

		<div class="basic" style="float:left;"  id="list1a">
			<a><?php
					$categories = categories();
					$index = 0;
					while ($index < count($categories))
					{
						$thisCategoryDict = $categories[$index];
						$thisCategoryID = $thisCategoryDict[CategoryIDKey];
						$thisCategoryName = $thisCategoryDict[CategoryNameKey];
						$thisCategoryItems = itemsForCategoryWithID($thisCategoryID);

						echo('<h1 onclick="runAnimation(animationObject, this)">'.$thisCategoryName . '</h1>');
						if (count($thisCategoryItems) > 0)
							echo('<ul>');

						?></a>
			<div>
				<p>
					<?php $itemIndex = 0;
						while ($itemIndex < count($thisCategoryItems))
						{
							$thisItem = $thisCategoryItems[$itemIndex];
							$thisItemID = $thisItem[ItemIDKey];
							$thisItemName = $thisItem[ItemNameKey];
							echo('<li>'.$thisItemName. '</li><br />');
							$itemIndex++;
						}

						if (count($thisCategoryItems) > 0)
							echo('</ul>');
						$index++;
					}
				?>
				</p>
			</div>

</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
	</body>
</html>
	<?php error_reporting(E_ALL); include("../../assets/includes/functions.php"); ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<title>jQuery UI Accordion</title>

	<link rel="stylesheet" href="demo.css" />

	<script type="text/javascript" src="../lib/jquery.js"></script>
	<script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>

	<script type="text/javascript" src="../lib/jquery.easing.js"></script>
	<script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="../jquery.accordion.js"></script>

	<script type="text/javascript">
	jQuery().ready(function(){
	// simple accordion
	jQuery('#list1a').accordion();
	jQuery('#list1b').accordion({
	autoheight: false
	});

	// second simple accordion with special markup
	jQuery('#navigation').accordion({
	active: false,
	header: '.head',
	navigation: true,
	event: 'mouseover',
	fillSpace: true,
	animated: 'easeslide'
	});

	// highly customized accordion
	jQuery('#list2').accordion({
	event: 'mouseover',
	active: '.selected',
	selectedClass: 'active',
	animated: "bounceslide",
	header: "dt"
	}).bind("change.ui-accordion", function(event, ui) {
	jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
	});

	// first simple accordion with special markup
	jQuery('#list3').accordion({
	header: 'div.title',
	active: false,
	alwaysOpen: false,
	animated: false,
	autoheight: false
	});

	var wizard = $("#wizard").accordion({
	header: '.title',
	event: false
	});

	var wizardButtons = $([]);
	$("div.title", wizard).each(function(index) {
	wizardButtons = wizardButtons.add($(this)
	.next()
	.children(":button")
	.filter(".next, .previous")
	.click(function() {
	wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
	}));
	});

	// bind to change event of select to control first and seconds accordion
	// similar to tab's plugin triggerTab(), without an extra method
	var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');

	jQuery('#switch select').change(function() {
	accordions.accordion("activate", this.selectedIndex-1 );
	});
	jQuery('#close').click(function() {
	accordions.accordion("activate", -1);
	});
	jQuery('#switch2').change(function() {
	accordions.accordion("activate", this.value);
	});
	jQuery('#enable').click(function() {
	accordions.accordion("enable");
	});
	jQuery('#disable').click(function() {
	accordions.accordion("disable");
	});
	jQuery('#remove').click(function() {
	accordions.accordion("destroy");
	wizardButtons.unbind("click");
	});
	});
	</script>

	</head>
	<body>

	<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/">jQuery accordion Plugin</a> Demo</h1>
	<div id="main">

	<fieldset>
	<legend>Standard, container is a div, header is h3 and content div and nested p</legend>

	<h3>Code</h3>
	<pre><code class="mix">jQuery('#list1a').accordion();
	jQuery('#list1b').accordion({
	autoheight: false
	});</code></pre>

	<div class="basic" style="float:left;" id="list1a">
	<a><?php
	$categories = categories();
	$index = 0;
	while ($index < count($categories))
	{
	$thisCategoryDict = $categories[$index];
	$thisCategoryID = $thisCategoryDict[CategoryIDKey];
	$thisCategoryName = $thisCategoryDict[CategoryNameKey];
	$thisCategoryItems = itemsForCategoryWithID($thisCategoryID);

	echo('<h1 onclick="runAnimation(animationObject, this)">'.$thisCategoryName . '</h1>');
	if (count($thisCategoryItems) > 0)
	echo('<ul>');

	?></a>
	<div>
	<p>
	<?php $itemIndex = 0;
	while ($itemIndex < count($thisCategoryItems))
	{
	$thisItem = $thisCategoryItems[$itemIndex];
	$thisItemID = $thisItem[ItemIDKey];
	$thisItemName = $thisItem[ItemNameKey];
	echo('<li>'.$thisItemName. '</li><br />');
	$itemIndex++;
	}

	if (count($thisCategoryItems) > 0)
	echo('</ul>');
	$index++;
	}
	?>
	</p>
	</div>

	</div>
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	_uacct = "UA-2623402-1";
	urchinTracker();
	</script>
	</body>
	</html>