Unobtrusive jQuery slide toggle with cookies
August 26th, 2008
Using jQuery to create a “slide/hide” toggle and remembering the last state on reload, or page navigation
Recently at work I was assigned to come up with a “framework” of sorts for developing sites within our intranet. I thought it would be nice to add some flare to the design, enter jQuery. On all our intranet sites we have a standard header with some navigation that does not always look the best on all designs, so I needed a way to hide this, but be able to show it when a user needed one of these links.
I found some solutions, but I wanted to take it one step further by making this piece of the site unobtrusive, which is something you should always strive for when dealing with behavior (JavaScript). I then found a need to remember the last state of the toggle. This is not always a requirement, depending on the data being toggled you may not have a need for this, but alas, I did.
Here is what you need to get going:
- jQuery - Get the latest copy
- Cookie Plugin for jQuery
- jquery-slider.js - ifoh designs slider script
- *EDIT: 8/27/2008 - Updated for back-button functionality
For the impatient folks out there now might be a good time to:
Next, you are going to need to have some initial markup to work with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>ifoh designs: jquery slider test</title><link rel="stylesheet" href="/css/jquery-slider.css" type="text/css" media="screen" /><script type="text/javascript" src="/scripts/jquery.js"></script><script type="text/javascript" src="/scripts/jquery-cookie.js"></script> <script type="text/javascript" src="/scripts/jquery-slider.js"></script> </head> <body> <div id="panel"> <h3>The most important content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id turpis at elit convallis varius. Nunc et purus. Nulla consectetuer aliquam metus. Nulla facilisi. Nulla facilisi. In euismod libero in nulla. Vivamus suscipit mi a odio. Proin laoreet imperdiet augue. Phasellus id eros. Praesent vestibulum, quam nec condimentum mollis, ante eros fermentum augue, non consectetuer diam odio et nulla. Proin vel mi sed odio aliquam hendrerit. Quisque accumsan varius lacus. Fusce eget arcu vitae nunc pellentesque ultricies. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean est nisi, dictum non, tempor eget, convallis eget, nulla.</p> </div> <div id="wrapper"> <h1>Jquery Slider Test - Home Page</h1> <ul> <li class="selected"><a href="jquery-slider.html" title="Home page">Home</a></li> <li><a href="jquery-slider-2.html" title="jquery-slider page 2">Page 2</a></li> <li><a href="jquery-slider-3.html" title="jquery-slider page 3">Page 3</a></li> </ul> <div id="content"> <h2>Home Page Stuff</h2> <p>some supporting content</p> </div> <!-- END #content --> </div> <!-- END #wrapper --> </body> </html>
Let’s take a look at what makes up the slider script:
// Author: Matt Rossi
// Website: ifohdesigns.com
// Article Source: http://ifohdesigns.com/blog/tutorials/
// Last Modified: August 27, 2008// IF YOU WISH TO USE THIS SCRIPT I WOULD APPRECIATE A BACKLINK
$(document).ready(function() {
$("#panel").hide();
var a = $("<a>toggle header</a>").attr('href','#').addClass("btn-slide");
$('#wrapper').before(a);
$(".btn-slide").click(function(){
if ($("#panel").is(":hidden")) {
$("#panel").slideDown("slow");
$(this).addClass("active");
$.cookie('showTop', 'collapsed');
return false;
} else {
$("#panel").slideUp("slow");
$(this).removeClass("active");
$.cookie('showTop', 'expanded');
return false;
}
});
// COOKIES
// Header State
var showTop = $.cookie('showTop');
// Set the user's selection for the Header State
if (showTop == 'collapsed') {
$("#panel").show();
$(".btn-slide").addClass("active");
};
});
In plain English what is happening here is essentially…
- hide the div with the content we want “slideable”
- create an anchor, give it a class and insert it into the page
- when you click the newly created button either show or hide the content area
- record the state of the toggle
- set the cookies based on the state of the toggle
- show or hide the content area based upon the cookie
We also add an “active” class to the anchor to give it the green color when we are able to see the #panel area.
If JS is disabled the user should see the contents of #panel by default before any other content.
Take a look at the finished product now!
By all means, I am in no way an expert with jQuery, so if you notice a bug, just let me know. If you have a better solution, I would love to see/hear it, so share with us all! If you do wish to use this script, I would appreciate a backlink, thanks.
- Posted at 3:54 pm in tutorials
- Leave a comment
decide to wish you Thanks. Eugene