/*
	<script type="text/javascript" src="/js/jquery.js"></script>
	<script type="text/javascript" src="/js/accordion.js"></script>
	
	<style type="text/css">
		.accordion dt {
			display: block;
			width: 100%;
			padding: 4px;
		}
		.accordion dd {
			display: none;
		}
		.accordion img {
			margin: 4px;
			vertical-align: middle;
			cursor: pointer;
		}
		.accordion dt a {
			background-image: url(/forms/images/expand.png);
			background-repeat: no-repeat;
			background-position: left center;
			margin-left: 5px;
			padding-left: 20px;
			width: auto;
			cursor: pointer;
		}
		.accordion dd {
			border: 1px solid silver;
			background-color: #eee;
		}
	</style>
	
    <dl class="accordion">
        <dt><a href="#" title="Expand">Header 1</a></dt>
        <dd>
            <p>
                Body 1</p>
        </dd>
        <dt><a href="#" title="Expand">Header 1</a></dt>
        <dd>
            <p>
                Body 2</p>
        </dd>
    </dl>
*/

jQuery.noConflict();	// avoid messing with other javascript libraries

var accDownIcon = 'url(/forms/images/expand.png)';
var accUpIcon = 'url(/forms/images/collapse.png)';

jQuery(document).ready(function()
{
jQuery('.accordion dd').hide("none");
jQuery('.accordion > dt > a').click(function ()
	{
	if( jQuery(this).parent().next('dd').css("display") == "none" )
	{
		jQuery(this).parent().next('dd').show("normal")
		this.savedAttr = this.getAttribute('title');
		this.setAttribute('title','Collapse');
		this.style.backgroundImage = accUpIcon;
	}
	else 
	{
		jQuery(this).parent().next('dd').hide("none"); 
		this.style.backgroundImage = accDownIcon;
		this.setAttribute('title',this.savedAttr);
	}
	});
});