Modify JQuery sliding panel routine

Question

I'm new to Qjuery and trying to learn just enough to finish my web site.

A while back, sg3s wrote a most excellent fiddle that does most of what I'm looking for. Here it is: http://jsfiddle.net/sg3s/RZpbK/

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

});​

There's two or three changes that I would like to make to this and I spent most of the weekend trying to figure this out with no success.

1: Have a forth trigger (maybe "trigger0") that would close the panel completely. Previous panel would close and no new one would open unless someone hit one of the other triggers besides trigger0.

2: I want to add a background image to the trigger button to indicate that it was selected.

3: I don't know if this can be done or if this is just of byproduct of JQuery. It would be nice if you could hit the back button once to get back to the previous page, instead of hitting it the same number of times that you hit the trigger buttons.

Any help on any of these items would be greatly appreciated, Bob

Answer 1

A late answer but i think this will solve you issues above

1. Add a new panel and make that hide the panel with the '.active' class set, see fiddle for code
2. I added a background color (easily changed to image using same type of code, i just didnt have an image handy). In Click function first remove all backgrounds with $('a.panel').css('background', ''); then set the background on the currently clicked item $(this).css('background', 'red');
3. add event.preventDefault(); to you click event function, this will disable the default behaviour of the href (navigate to the href). And thus keeping you history clean and "back button will take you back to previous page.

Fiddle based on the one in your question

http://jsfiddle.net/7YHFa/