Question

I am using slide out panel that on default is set to display:none. If the trigger is clicked it will toggle the class to “active”. That makes the trigger show a red x (for close) that comes from a sprite position.

$(document).ready(function(){
$(".info-panel-left-trigger").click(function(){
 $("#info-panel-left").toggle(400);//switching between display and display:none
 $(this).toggleClass("active");
 return false;
});

});
So this is what I have but now comes what I want and maybe one of you got a clou how to achieve this.
I would like to create the option to have the panel either shown on default or hidden on default and the toggle should behave accordingly. This would mean that if I have chosen to show the panel on default that the toggle should be set to “active” in order to show the x sprite position. If I have chosen to hide the panel on default the toggle should be set to “not active” in order to show the + sprite position.

I hope I have made myself clear enough. HELP is appreciated very much.

EDIT You guys are right. Some more explanation is needed. I just wanted it to make as short as possible but here is some more…

I am creating a website template and the buyer of the template should be able to include those panels for information purposes. On default it should set up showing the panel and have set the trigger class to “active”. This would show my little x for close.
But if the buyer of the template add the extra class “hide” to the panel markup the panel should be hidden on default and the trigger should not be set to active because in that case my trigger would show the little + for open this panel. Got my idea now?

Answer 1

Where (and how persistent) do you store this default? Just on the client for that session, or server-side? Server-side would seem most logical to me.. if so, when the user has chosen to show the panel, add a class to the info-panel-left’s html. Assuming we then have

<div id="info-panel-left" class="shown"></div>

Add a bit of javascript so it reads

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'shown' ) ) {
        infoPanel.show();
        infoPanelTrigger.addClass( 'active' );
    }
    ... etc ...

(you could just use the ‘active’ class as well of course)

EDIT: okay; if we just stick to the JS part, I don’t think that changes the approach much, does it? Just reverse it:

<div id="info-panel-left" class="hide"></div>

then

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'hide' ) ) {
        infoPanel.hide();
        infoPanelTrigger.removeClass( 'active' );
    }
    ... click trigger, toggle etc ...