A simple version of a Hide Reveal script. Many Hide Reveal scripts are bloated and don't always work in all layouts.

The code below...

<!-- Create the link that will be clicked to reveal the content -->
<a href="#" data-id="targetcontent" class="hidereveal">Show Content</a>

<!-- Create the div that contains the hidden content -->
<div id="targetcontent">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.hidereveal').CWHideReveal();
});
</script>

... produces this

Show Content

Property	Type	Default	Description
speed	integer	300	The speed in which the animation completes. This is the amount of time it takes the hidden div to be shown or hidden.
easing	string	''	If you want easing in your animation include it here. If you include the jQuery UI easing plugin you will have more options available.
changeText	boolean	false	If you want to specify the text that the link element updates to on click then set this to true.
showText	string	'Show'	The text you want the button to display when the content is hidden.
hideText	string	'Hide'	The text you want the button to display when the content is hidden.
accordian	boolean	false	If you want the script to act like an accordian and close other hidereveal content when another link is clicked then set this to true.
openClass	string	false	This is the class that is applied to containers once they have reached their open status.
activeLinkMode	string	true	The link that is clicked will have a class added to show that is has been clicked.
activeLinkClass	string	'cw_active'	This is the class that is applied to the active link.
defaultOpen	string	null	The ID of a section to have open be default.

Below are some more examples of the script.

Accordian Demo

Code:

<!-- Create the link and hidden content -->
<a href="#" data-id="example-content01" class="demo2">Show Content 1</a>
<div id="example-content01">
	This is the hidden content you have just revealed
</div>

<a href="#" data-id="example-content02" class="demo2">Show Content 2</a>
<div id="example-content02">
	This is the hidden content you have just revealed
</div>

<a href="#" data-id="example-content03" class="demo2">Show Content 3</a>
<div id="example-content03">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.demo2').CWHideReveal({
		accordian   : true,
		openClass   : 'demo2-open'
	});
});
</script>

Example:

Show Content 1
Show Content 2
Show Content 3

Link Name Change Demo

Code:

<!-- Create the link and hidden content -->
<a href="#" data-id="example-content04" class="demo3">Show Content 4</a>
<div id="example-content04">
	This is the hidden content you have just revealed
</div>

<a href="#" data-id="example-content05" class="demo3">Show Content 5</a>
<div id="example-content05">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.demo3').CWHideReveal({
        changeText  : true,
        openClass   : 'demo3-open'
	});
});
</script>

Example:

Show Content 4
Show Content 5

Active Link Class Demo

Code:

<!-- Create the link and hidden content -->
<a href="#" data-id="example-content06" class="demo4">Show Content</a>
<div id="example-content06">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="#" data-id="example-content07" class="demo4">Show Content 2</a>
<div id="example-content07">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="#" data-id="example-content08" class="demo4">Show Content 3</a>
<div id="example-content08">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.demo4').CWHideReveal({
        changeText  : false,
        openClass   : 'demo4-open'
    });
});
</script>

Example:

Show Content 6
Show Content 7
Show Content 8

Auto Open Class Demo

Code:

<!-- Create the link and hidden content -->
<a href="#" data-id="example-content09" class="demo5">Show Content</a>
<div id="example-content09">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="#" data-id="example-content10" class="demo5">Show Content 2</a>
<div id="example-content10">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="#" data-id="example-content11" class="demo5">Show Content 3</a>
<div id="example-content11">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.demo5').CWHideReveal({
        defaultOpen   : 'example-content10'
    });
});
</script>

Example:

Show Content 9
Show Content 10
Show Content 11

v0.5.0	30th January 2014	Completely re-coded the script Added the ability to have a container open by default through the script options. (As requested by Mark Plunkett)
v0.4	27th September 2013	Added unit test. Gave the plugin a small update to improve compatability
v0.3	28th March 2012	Added the option to add an active class to the current selected link on click.
v0.2	29th January 2013	Finalised the accordian command.
v0.1	22nd January 2013	Created the first version of the script based on previous created scripts.