﻿// this function takes three selectors
// wrapper: this is the parent element
// handle: this is the element that will be clicked
// toggle: this is the element that will toggle when the handle is clicked

/*
<script type="text/javascript">
	jQuery(document).ready(function(){
		$('.container').toggleSiblings('.wrapper','.handle','ul');
	})
</script>

<div class="container">
    <ul id="test">
    	<li class="wrapper" ><a href="#" class='handle' id='1'>Handle</a>
    		<ul>
    			<li class='hide'>Item</li>
    			<li>other itme</li>
    		</ul>
    	</li>
    	<li class="wrapper" ><a href="#" class='handle' id='2'>Handle</a>
    		<ul>
    			<li>Item </li>
    			<li class='hide'>Other item</li>
    		</ul>
    	</li>
    </ul>
</div>
 */

jQuery.fn.toggleSiblings = function(wrapper, handle, toggle) {
	var closed = 'closed';
	var open = 'open';
	
	jQuery(wrapper + " " + toggle).each(function(){
		jQuery(this).hide();
	});
	
	jQuery(wrapper + " " + handle).each(function(){
		jQuery(this).addClass('closed');
	});	
	
	jQuery(handle).click(function(){
		var element = jQuery(this);
		element.parents(wrapper).find(toggle).toggle();
		element.toggleClass(open);
		element.toggleClass(closed);
		return false;
	});
};