Create a slide down menu with toggle button using jQuery

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=""></script>


<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>


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

View Demo

One thought on “Create a slide down menu with toggle button using jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>