Simple jQuery toggle class

javascript-toggle

var toggle = function(selector, parentSelector, switchMode, onSelect) {
	var $items,
	    $containers;
	
	this.init = function() {
		$items = $(selector);
		$containers = $items.parents(parentSelector);
		$items.each(function() {
			$(this).data('container', $(this).parents(parentSelector));
		});
		
		$items.click(function(e) { 
			e.preventDefault();
			
			if (switchMode) {
				$containers.removeClass('current');
				$(this).data('container').addClass('current');
			}
			else {
				$(this).data('container').toggleClass('current');
			}
			
			if (onSelect) onSelect($(this));
		});
	};
	
	return this;
}

Use this where normal toggle functionality isn't sufficient. For instance if you want <a> links inside a list to toggle their parent <ul> container instead of themselves. Example:

HTML:

<ul class="nav">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
</ul>

<ul class="nav">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
</ul>

JavaScript:

var myToggler = new toggle('ul.nav a', 'ul.nav').init();

CSS:

ul.nav.current { background: red; }