Using jQuery to create a minimal sitemap section slider

Posted on Oct 21, 2009 by Rich to Web Development

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.

Website Section Slider using jQuery

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.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(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();			
		});
	});
});
</script>

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.

<style>
#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;}
</style>

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 id="sitemap">
	<!-- 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>

Pretty simple right? of course. Well here is the live example of the jQuery Quick Sitemap Section Slider for you too see what it looks like.

Click the link if you would like to DOWNLOAD the jQuery Quick Sitemap Section Slider

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

Tags: jQuery

6 Responses to "Using jQuery to create a minimal sitemap section slider"

Comment By: Andy Farmer

October 23rd, 2009 at 11:14 am

Interesting, have you considered the little used definition list tag,

dl
->dt
->dd

That semantically give you a natural question answer tags to use as your markup?

Semantically you can also nest a list item within your dd tag to…

Comment By: Rich

October 23rd, 2009 at 12:07 pm

Hey Andy, I actually didn’t think of that, but you make a good point. It really doesn’t matter if its a list or definition tags. Its really what is contained in the div itself or are you saying to replace the h3 with a DL and the div with lets say the DT?

Either way thats a good idea.

Comment By: Andy

October 24th, 2009 at 3:10 pm

Indeed, for a cleaner markup replacing the h3 with the dt – also gives your markup and a natural hierarchy.

Either, for a consumer using the site the experience is good. It is a coder’s perogative how they write their markup.

Comment By: joel

October 25th, 2009 at 3:38 am

wow.

I would have used an accordion, but this is so much better – even though it is an accordion.

…maybe I’ll use… Javascript!

Comment By: Rave

February 7th, 2010 at 8:42 am

and where you can see a demo?

Comment By: Rich

February 9th, 2010 at 8:10 am

Hey Rave, You can can see it here: jQuery Quick Sitemap Section Slider