Simplified Show/Hide

Here’s a simple way to show and hide any element on your page, using a link.

1. In your markup, put a class of “toggle” on the element you want to hide, and a class of “trigger” on the link you want to use to open and close it. For example:

<a href="#" class="trigger">Learn more</a>

2. Make sure you’ve got jquery linked. 3. Now add this javascript:

	<!-- Show/hide -->
	<script type="text/javascript">
		$(document).ready(function() {
		 // hides the toggle element
		  $('.toggle').hide();
		 // toggles the element on clicking
		  $('.trigger').click(function() {
			$('.toggle').toggle(400);
			return false;
		  });
		});
	</script>
	<!-- END Show/hide -->

NOTES:

• The number “400″ indicates 4 tenths of a second. Reduce the number to speed up the animation of the toggle. Increase it to slow it down.
• The class names “trigger” and “toggle” are arbitrary. You can use whatever class names you like, as long as the classes match in both the markup and the script.