jQuery plugin that hide/shows content - accordion menu style, but not quite like that.

Here is what the markup should look like (tags are to your convenience, only classes matter) :

<ul>
	<li class="ux-toggleable">
		<div class="ux-toggle-switch">
			Show/Hide me
		</div>
		<ul class="ux-toggle">
			<li>
				<a href="#">
					Link 1
				</a>
			</li>
			<li>
				<a href="#">
					Link 2
				</a>
			</li>
			<li>
				<a href="#">
					Link 3
				</a>
			</li>
		</ul>
	</li>
</ul>

Initilization :

$(function(){
	$('.ux-toggleable').toggleable();
});

Now whenever the user clicks "Show/Hide me", the subsequent

is toggled. Additionally, elements that are hidden by the plugin get a "closed" class (in this case the li.ux-toggleable.

Options

You can change the class name that closed toggles get like this :

$(function(){
	$('.ux-toggleable').toggleable({closedClass: 'my-closed-class'});
});

By default, the toggleable plugin will close all toggles. You can prevent this by passing an option at initialization time :

$(function(){
	$('.ux-toggleable').toggleable({autoclose: false});
});

Alternatively, you can also specify in the markup that you want only some toggles to be kept open by setting an data-open property on the toggle.

<ul>
	<li class="ux-toggleable" data-open>
		<div class="ux-toggle-switch">
			Show/Hide me
		</div>
		<ul class="ux-toggle">
			<li>
				<a href="#">
					Link 1
				</a>
			</li>
			<li>
				<a href="#">
					Link 2
				</a>
			</li>
			<li>
				<a href="#">
					Link 3
				</a>
			</li>
		</ul>
	</li>
</ul>