multiple slideout panels with active class
<p>I want the effect of tabbed panels but the main content of the page is a very complicated slideshow which I don't want within a tab. the idea is to slide out a series of panels over this closing one when another is clicked (and updating the active tab). I have got very close by merging two codes from stackoverflow - <a href="http://www.stellamays.co.uk/panels.html" rel="nofollow">see demo</a></p>

<p>the trouble is the toggle. if a user clicks on the link a second time the panel closes but the active class remains on the link. should the user click twice on the link it is ok for the panel to close but ideally the active link class would return to the home page. I would also like the active class to return to the home link when the X is clicked</p>

<p>here is the code:</p>

<pre><code>$(document).ready(function() {
var $panels           =    $('.panels &gt; .panel') 
  , event_namespace   =    '.Panelizer';
$('#menu &gt; li').on('click', 'a', function() {
    $panels.filter('.'+this.id).trigger('togglePanel'+event_namespace);
});
$panels
    .on('togglePanel'+event_namespace, function(){
        var $this           =   $(this)
          , $activePanels   =   $panels.filter(':visible').not($this);
        if ($activePanels.length) {
            $activePanels
                .one('panelHidden'+event_namespace, function(){
                    $this.is(':visible')
                    ? $this.trigger('hidePanel'+event_namespace)
                    : $this.trigger('showPanel'+event_namespace);
                })
                .trigger('hidePanel'+event_namespace);
        } else {
            $this.is(':visible')
            ? $this.trigger('hidePanel'+event_namespace)
            : $this.trigger('showPanel'+event_namespace);
        }
    })
    .on('hidePanel'+event_namespace, function(){
        var $this = $(this);
        $this.find('.content').fadeOut(100, function() {
            $this.fadeOut(200, function(){
                $this.trigger('panelHidden'+event_namespace);
            });
        });
    })
    .on('showPanel'+event_namespace, function(){
        var $this = $(this);
        $this.animate({
            'width': 'show'
        }, 200, function() {
            $this.find('.content').fadeIn(100, function(){
                $this.trigger('panelShown'+event_namespace);
            });
        });
    });
    $panels.find('.content .close').on('click', function() {
    $(this).closest('.panel').trigger('togglePanel'+event_namespace);  
    $("a.active").removeClass ("active").addClass("inactive");

    });
});
$(function(){
$('a.inactive').click(function(){
    $("a.active").removeClass("active")
                 .addClass("inactive");

    $(this).removeClass('inactive')
           .addClass('active');

    });
});
</code></pre>

<p>would be great if someone who understands javascript could point me to a solution, I think it is quite simple - the trouble is so am I!</p>
