Simple Collapsible Panel With jQuery

Oct

Simple Collapsible Panel With jQuery Graphic

jQuery is probably something I would consider a designer’s best friend. It turns a complex language like javascript into something that can be utilized for great visual effects on web pages with simple syntax. Creating something like a collapsible panel, or a section of a website that can be toggled on or off, requires minimal coding.

Today we will be building a simple collapsible panel. The code being used here is very minimal and not complicated in any way. This is a great tutorial for beginners with jQuery, but still shows jQuery’s great ability to make simple code into quality interactivity on a website. Now here is our code:

The HTML

<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Seth Etter's Testing Website</title>
	<link rel=stylesheet href="css/reset.css" type="text/css" media=screen>
	<link rel=stylesheet href="css/style.css" type="text/css" media=screen>

	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="js/scripts.js" type="text/javascript"></script>

</head>

<body>

	<header>

		<h1 id="logo">Collapsible Panel</h1>

		<span id="navControl"><a href="#" class="showNav">Show Navigation</a> | <a href="#" class="hideNav">Hide Navigation</a></span>

	</header>

	<div class="clear"></div>

	<nav>
		<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		</ul>
	</nav>

</body>

</html>

The CSS

It should also be noted that I have a separate CSS reset file here that I am not referencing, but you should ALWAYS reset your style sheets!

.floatleft {
	float:left;
}

.floatright {
	float:right;
}

.clear {
	clear:both;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, {
	color:#02635C;
}

p {
	color:#444444;
}

/* LINKS */

a:link {
	color: #777;
	text-decoration: none;
}
a:visited {
	color: #777;
	text-decoration: none;
}
a:hover,a:focus {
	color: #94C09F;
	text-decoration: none;
}
a:active {

}

/* BOXES */

body {
	background:#222;
	width:960px;
	margin:0 auto;
	font-family:Helvetica, Arial, sans-serif;
}

header {
	height:30px;
	line-height:80px;
	position:relative;
	width:960px;
}

	h1#logo {
		float:left;
		color:#fff;
	}

nav {
	height:50px;
	width:958px;
	line-height:50px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #999;
	border-bottom:none;
	background:#fff;
	display:none;
}

	#navControl {
		padding:80px 50px 0;
		float:right;
	}

	nav ul li {
		list-style:none;
		height:50px;
		padding:0px 55px 0px 20px;
		font-size:1.1em;
		font-weight:bold;
		border-right:1px solid #999;
		display:block;
		float:left;
		text-transform:uppercase;
	}

The jQuery

$(function() {

	$('a.showNav').click(function() {
		$('nav').slideDown(1000);
	});

	$('a.hideNav').click(function() {
		$('nav').slideUp(1000);
	});	

});

Code Explanation

To be entirely honest, the code is pretty straight forward. As far as markup and styling, we have a simple horizontal navigation panel with a inline-styled list. Then we have a span with two options, to hide and show navigation panel. Each option has a separate class of showNav, and hideNav, and each does as it is named.

Next in the jQuery, we have our selector, ‘a.showNav’, which when clicked, tells the panel with the class of ‘nav’ to slideUp over 1000 milliseconds. That should explain the syntax a bit, as I said it’s very straightforward. We use our CSS class or ID names to select objects and tell them their function.

The same code is then repeated for ‘a.hideNav’. The animation name this time is slideDown, as you might have guessed. After all that, we have a working collapsible panel!

It is obviously an extremely simple process, and it covers much of the basics of jQuery, this is a great exercise for beginners, but also shows the ability of jQuery to make simple code into great website interactivity.

This entry was posted on Wednesday, October 28th, 2009 at 6:38 am and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.