Bramme.net - Bram Van der Sype's online portfolio

A few days ago I posted a script that allowed you to create a jQuery slideToggle that would remember it’s last state throughout page reloads. The original idea came from Matt over at ifoh designs. He even was so kind to comment on my version. He mentioned something though I think in return is a mention from me.

Matt says :

I am just concerned though about the link for “hide” if JS is disabled it does not function? Maybe if you created the link with jQuery as well, and added it in, then it would be more accessible.

Now even though there’s not a lot of people out there who don’t have javascript enabled, I think they should be considered. Though Matt’s idea of adding the link through JS is good, there’s an easier way.

What we’ll do is simply hide the link with CSS and then show it with Javascript. If people have got javascript turned off, they’ll never see it! And something tells me people with javascript turned off, won’t go snooping through your source code and wonder why they’re not seeing that link.

So how do we do it?

#top { display: none}

In my example, I’m not only hiding the link, I’m also hiding the container. You could, offcourse, only hide the link.

And how does our new slider.js code look like?

$(document).ready(function() {

// the div that will be hidden/shown
var panel = $(“#box”);
//the button that will toggle the panel
var button = $(“#top a”);
var button_container = $(“#top”);
// do you want the panel to start off collapsed or expanded?
var initialState = “expanded”; // “expanded” OR “collapsed”
// the class added when the panel is hidden
var activeClass = “hidden”;
// the text of the button when the panel’s expanded
var visibleText = “hide”;
// the text of the button when the panel’s collapsed
var hiddenText = “show”;

//—————————
// don’t edit below this line,
// unless you really know what you’re doing
//—————————

button_container.show();

if($.cookie(“panelState”) == undefined) {
$.cookie(“panelState”, initialState);
}

var state = $.cookie(“panelState”);

if(state == “collapsed”) {
panel.hide();
button.text(hiddenText);
button.addClass(activeClass);
}

button.click(function(){
if($.cookie(“panelState”) == “expanded”) {
$.cookie(“panelState”, “collapsed”);
button.text(hiddenText);
button.addClass(activeClass);
} else {
$.cookie(“panelState”, “expanded”);
button.text(visibleText);
button.removeClass(activeClass);
}

panel.slideToggle(“slow”);

return false;
});
});

That’s all there is to it!