Using jQuery to create a minimal sitemap section slider

Posted at Oct 21, 2009 7:26:39 AM by Ronald Busky | Share

Have you ever gone to a website and visited their sitemap page only to find an elongated page that you have to scroll forever to try to find what you are looking for? If you answer is "yes" then we are in the same boat. Well that got me to thinking. Why couldn't we use the power of jQuery to basically organize the sitemap into sections and expand the section when you click on the link.

I have created this quick piece of code to accomplish just that.

Well here is the fancy of it all:

First the guts. Here is the call to your jQuery file; of course we use the one google hosts and the actual jQuery Javascript code that makes this all possible. Note that this code should go inside the <head> tag.

$(document).ready(function(){
	$("#sitemap h3").each(function(){
                $("#sitemap div").css("display","none");
		$(this).addClass("resting");
		$(this).click(function(){
			var question = $(this).attr("class");
			var answer = $(this).next();
			if(question === "resting"){
				$(this).removeClass("resting");
				$(this).addClass("active");
				}
			else{
				$(this).removeClass("active");
				$(this).addClass("resting");
				}
			$(answer).slideToggle();
		});
	});
});

We continue by getting some basic CSS to 1. hide the actual website pages from the user and 2. to make it pretty. This should also go inside your <head> tag.

#sitemap h3{cursor:pointer;font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;margin:0 0 5px 0;padding:0;}
#sitemap h3.resting{color:#cc0;}
#sitemap h3.active{color:red;}
#sitemap div{margin:0;padding:5px 10px;}
#sitemap div{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;font-weight:normal;}
#sitemap div ul{margin:0 0 0 15px;padding:0;}
#sitemap div ul li a{display:block;color:#333;padding:3px 5px;margin:0;height:20px;line-height:20px;}

Now we can go ahead and add the actual sitemap pieces for the sitemap page. Granted this is html, but it wouldnt take too much work to convert it into php and get the info from mySql if your using some kind of content management system.

<!-- begin sitemap -->
<div>
	<!-- begin section -->
<h3>Website Section 1</h3>

    <!-- begin pages -->
<div>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul></div>

	<!-- begin section -->
<h3>Website Section 2</h3>

    <!-- begin pages -->
<div>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul></div>

Note: If javascript is disabled, the sitemap will show everything on the page; which goes back to the sitemaps everyone is used to.