Every couple of weeks I seem to find myself checking 9rules.com to see if they’re accepting new submissions as I’d like to submit this site. Any how on this occasion I couldn’t help but notice the browse by community section at the top of the page. Clicking the button reveals a section that contains a list of category names. I thought this would be a good example to base this post on, and to show how simple it is to achieve this effect. I’ve approached this tutorial slightly differently and design a mock homepage for a website to show exactly how to implement such a technique.

Here is the ‘Browse Community’ button found on 9Rules.com

And this is what we will be building.

The design and UX

It’s important to question your decision when choosing to position an important interactive element within a web page. Does it really need to be there? Does the design detract from other important page content? What’s so useful about an element like this is that it actually doesn’t take up any extra real estate on your page other than the button itself, so instead of having one banner at the top of the page that i always there we can add another layer of information onto the site. You can see below that I’ve take two screenshots of the demo page and layered them removing one section so you can see that the space for the banner section just under the header is effectively used twice, when you browse the categories the rest of the page is shifted down to reveal the list, so we’re not loosing valuable page space with a list.

9Rules have opted for a simple show and hide effect which works just fine for this module. I guess it was designed like this because it is both simple and functional, the user isn’t delayed or bombarded by fancy sliding effects etc.

The JavaScript

I’ve covered this effect in the past and I’m sure you hardcore jQueryers will be more than familiar with this simple JavaScript. We will of course need to include the jQuery framework which you can get from Google.

Below we have our onDOM ready function which is executed once the users web browser has loaded the HTML code into their browser, this doesn’t include images or flash just the main page structure. Once this function is run we then have an event handler or event listener as they’re also known, in our case the event is a click. So the second line on the code below is set to listen for a user clicking on the element with an id of ‘browse’, which is our browse categories image. So once the .click event listener is triggered it does whatever is within the brackets or function, in our case we’re toggling the div with the list of categories. and because we’re not passing anything into the toggle function i.e a duration the categories div is just set to show an hide.

$("document").ready(function () {

    $('#browse').click(function(){

	 $('.categories').toggle();

		});

	});

You’ll notice if you download the HTML code that I’ve used some CSS3 techniques to achieve the rounded corners on the boxes and the slight drop shadows. I’ve set the .categories div to display:none; when the page loads, this is
so the user has to click browse to see it, however you could leave it visible and allow the user to hide it simply by changing this to display:block;

The HTML

This is just a snippet of the HTML code as the code is quite long for the demo page.

<div class="head">
  <div class="main"><a href="http://papermashup.com"><img src="http://papermashup.com/wp-content/themes/arthemia/images/logo.png" width="428" height="118"/></a><img src="images/browse.png" id="browse" height="64" width="255"/></div>
</div>
<div class="container">
  <div class="content">
    <div class="categories">
      <ul>
        <li><a href="http://papermashup.com/category/api/">API's</a></li>
        <li><a href="http://papermashup.com/category/php/">PHP</a></li>
        <li><a href="http://papermashup.com/category/mysql/">MySQL</a></li>
        <li><a href="http://papermashup.com/category/oauth/">OAuth</a></li>
        <li><a href="http://papermashup.com/category/memcache/">Memcache</a></li>
        <li><a href="http://papermashup.com/category/css/">CSS</a></li>
        <li><a href="http://papermashup.com/category/api/javascript">JavaScript</a></li>
        <li><a href="http://papermashup.com/category/jquery/">jQuery</a></li>
        <li><a href="http://papermashup.com/category/mootools/">MooTools</a></li>
        <li><a href="http://papermashup.com/category/mobile/">Mobile</a></li>
        <li><a href="http://papermashup.com/category/iphone/">iPhone</a></li>
        <li><a href="http://papermashup.com/category/web-tools/">Web Tools</a></li>
        <li><a href="http://papermashup.com/category/frameworks/">Frameworks</a></li>
        <li><a href="http://papermashup.com/category/analytics/">Analytics</a></li>
        <li><a href="http://papermashup.com/category/social-media/">Social Media</a></li>
        <li><a href="http://papermashup.com/category/widgets/">Widgets</a></li>
        <li><a href="http://papermashup.com/category/reviews/">Reviews</a></li>
        <li><a href="http://papermashup.com/category/trends/">Trends</a></li>
        <li><a href="http://papermashup.com/category/social-networks/">Social Networks</a></li>
        <li><a href="http://papermashup.com/category/social-bookmarking/">Bookmarking</a></li>
        <li><a href="http://papermashup.com/category/facebook/">Facebook</a></li>
        <div class="clear"></div>
      </ul>
    </div>
    <div class="top_container">

    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom"><img src="images/subscribe.png" class="subscribe" width="957" height="125"/></a>

    </div>

This tutorial is aimed at beginners who are starting out with jQuery, I hope that It shows you how easy it is to add simple effects to your site.