This week I had the task of taking a rather long and complicated list and shortening it down into categories with sub lists. jQuery seemed like the best way to go as I've seen accordion style sliding list and things of that sort before. The only thing I hadn't come across was a list with a drop down menu which controlled the list and content below...so I set out to build one as well as teach myself some jQuery (I knew what it was, just never wrote my own jQuery code before).
So the idea here was I wanted a list to appear on the right side of my div which contained categories in which I could click on and have the content on the page, in lists, expand to show the selected list all while sliding away the previously displayed list.
This screenshot/mockup will help better explain the desired look and feel as well as functionality I was going for.
Sounds quite tricky but after a bit of messing around with some basic jQuery code and functionality I was able to get everything working somewhat well.
I first started out by building the header area with the "MOST RECENT" list and "SORT BY CATEGORY" text. I made it so when you click on the "MOST RECENT" link it would drop down a menu with the category listings. These category listings control what is shown on the page, it controls what list will appear when you click on your desired category.
So once I got the header portion built, I then begin making a list wrapped in custom divs for each of the category lists' content. Being that I have five categories I had to make 5 custom wrapped divs. For these divs were controlled by the category drop down list on right.
Now that I had my header portion and my category lists it was time to add some CSS to hide these lists until jQuery told them to show themselves. When the page loads I wanted one list to appear, the "MOST RECENT" list, so I didn't hide that list in CSS so it would display right away. I hid the other lists but not the first one.
#list-item2.sortlist,
#list-item3.sortlist,
#list-item4.sortlist,
#list-item5.sortlist {
display: none;
}
Now that the lists were hiding through CSS it was time to make them show by using jQuery. But first I needed to make the category drop down list actual function. So when the user clicks on the text for "MOST RECENT" it is to drop down and reveal categories which are also clickable and that changes the list which is displayed to the user.
Here is the magic jQeury code for that:
$("#sort").click(function(){
$("#sort-options").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
What that says is when you click on the div "sort" it will expand or contract the div "sort-options" and give it a class of "active" or none. Of course these div names and id's are all specified in my HTML, so they actually relate to a working div.
The "active" class here is what allows me to change the red arrow pointing down to a red arrow pointing up. So "active" shows an arrow pointing down and no class shows an arrow pointing up.
Since the drop down category menu is working correctly it's now time to make the category options/links actually do something.
Here is yet more magic jQuery code to do just that:
$("#sort_item1").click(function(event) {
event.preventDefault();
$("#sort-options").slideToggle();
$("#list-item1").slideDown();
$("#list-item2").slideUp();
$("#list-item3").slideUp();
$("#list-item4").slideUp();
$("#list-item5").slideUp();
$("#sort em").empty();
$("#sort em").append("Most Recent");
$("#sort").toggleClass("active"); return false;
});
What's going on here is if the user clicks on the "a href id" of "sort_item1", which in this case is "MOST RECENT", all lists wrapped in the appropriate divs are to slide up and collapse/disappear and the text in the top portion of the category area (next to the red arrow) is to be removed and replaced with the text "MOST RECENT".
The stripping of text and adding is done by these two lines of code:
$("#sort em").empty();
$("#sort em").append("Most Recent");
Pretty neat isn't it. You can take out text and replace it based on what the user clicks on in the category list. I took this chunk of code about and copied/pasted it for each category and changed which lists were to slide up and down and which text was to be replaced with what.
Be sure to check out a working example of what I was trying to explain above. I'm sure that if you view it in action and read/re-read my post it will make more sense. It took me a little time to really understand what all was going on with each click but once I got things in order it all seemed to fall into place and be more understandable.
All of this code is available for download so you can mess with it and use it anywhere you'd like. I included all of the HTML/CSS/jQuery code/images as well so those can also be used anywhere else as well.
I'm sure there are better ways to go about this but this is what I was able to come up with and understand. It works in all browsers I have tested it in too such as IE6, IE7, FireFox (Mac and PC) and Safari. Of course there are some IE specific CSS code to make some text and boxes align correctly, but that's just about the norm anyways.
I've just scratched the surface as to what jQuery is capable of and I can't wait to see what else it can do. This is just a pretty effect which simplifies the use of categories and lists, jQuery can handle much more complex code and situations that this, so I plan on continuing to learn more about it in hopes of applying it to my future projects.
