Recently, I have come to find myself recreating the same code over and over again for jQuery slide down menus equipped with one button to toggle display. There’s nothing complex about this code, but it will give beginners the gist of how to do accomplish the task. For this example, we will use jQuery 1.3.2, delivered from Google’s CDN.

On a side note, using a CDN like Google’s can lessen the load on your server, and will actually help reduce overall bandwidth usage on the web as whole. If a visitor has already downloaded the jQuery library from Google’s CDN, the majority of the time they won’t need to do it a second time if you implement this strategy.

The Google CDN address for jQuery 1.3.2 can be implemented using the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

HTML:

<input type="button" id="hidden_menu_button" value="Toggle Menu" />
<div id="hidden_menu" style="display: none;">
	<label><input type="checkbox" />Checkbox #1</label>
	<label><input type="checkbox" />Checkbox #2</label>
</div>

JavaScript:

<script type="text/javascript">
(function($) {
	$("#hidden_menu_button").click(function() {
		if ( $("#hidden_menu").is(":hidden") ) {
			$("#hidden_menu").slideDown("normal");
		} else {
			$("#hidden_menu").slideUp("normal");
		}
	});
})(jQuery);
</script>

View Demo

Share