Join the chat at https://gitter.im/clivewalkden/cwHideReveal

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
This is the hidden content you have just revealed
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.
internalLinks boolean false If you want the script to look for internal buttons that can trigger other hide reveals opening.
internalLinkClass string cw_link The link class to search for if internalLinks is true.
loaded callback function(){} Callback function returned when the hide reveal has been loaded.
opened callback function(){} Callback function returned when a hide reveal has been opened.
closed callback function(){} Callback function returned when a hide reveal has been closed.

Below are some more examples of the script.

Accordian Demo

Code:

<!-- Create the link and hidden content -->
<a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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
This is the hidden content you have just revealed

Show Content 2
This is the hidden content you have just revealed

Show Content 3
This is the hidden content you have just revealed

Link Name Change Demo

Code:

<!-- Create the link and hidden content -->
<a href="javascript:void(0)" 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="javascript:void(0)" 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
This is the hidden content you have just revealed

Show Content 5
This is the hidden content you have just revealed

Active Link Class Demo

Code:

<!-- Create the link and hidden content -->
<a href="javascript:void(0)" data-id="example-content06" class="demo4">Show Content 6</a>
<div id="example-content06">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content07" class="demo4">Show Content 7</a>
<div id="example-content07">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content08" class="demo4">Show Content 8</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
This is the hidden content you have just revealed

Show Content 7
This is the hidden content you have just revealed

Show Content 8
This is the hidden content you have just revealed


Auto Open Class Demo

Code:

<!-- Create the link and hidden content -->
<a href="javascript:void(0)" data-id="example-content09" class="demo5">Show Content 9</a>
<div id="example-content09">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content10" class="demo5">Show Content 10</a>
<div id="example-content10">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content11" class="demo5">Show Content 11</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
This is the hidden content you have just revealed

Show Content 10
This is the hidden content you have just revealed

Show Content 11
This is the hidden content you have just revealed


Internal Link Demo

For the internal link to work you need to add a data-trigger attribute to the link with the value the element you are triggering.

Code:

<!-- Create the link and hidden content -->
<a href="javascript:void(0)" data-id="example-content12" class="demo6">Show Content 12</a>
<div id="example-content12">
	This is the hidden content you have just revealed <a href="javascript:void(0)" data-trigger="example-content14" class="cw_link">this opens content 14</a>
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content13" class="demo6">Show Content 13</a>
<div id="example-content13">
	This is the hidden content you have just revealed
</div>
<br class="br">
<a href="javascript:void(0)" data-id="example-content14" class="demo6">Show Content 14</a>
<div id="example-content14">
	This is the hidden content you have just revealed
</div>

<script>
// Finally call the script
$(function(){
	$('.demo6').CWHideReveal({
        accordian: true,
    	internalLinks: true
    });
});
</script>

Example:

Show Content 12
This is the hidden content you have just revealed this opens content 14

Show Content 13
This is the hidden content you have just revealed

Show Content 14
This is the hidden content you have just revealed


v0.7.0 20th July 2015 Added callbacks
Added support for internal buttons triggering other dropdowns
v0.6.2 18th March 2015 Changed the bower ignore files slightly
v0.6.1 3rd February 2015 Added Bower support
v0.6.0 3rd February 2015 Updated the script for AMD
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.