jQuery toggle slide out panel

Question

Я использую выдвижную панель, которая по умолчанию установлена ​​для отображения: нет. Если нажать триггер, он переключит класс на «активный». Это заставляет триггер показывать красный x (для закрытия), который исходит из позиции спрайта.

$(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; 
}); 

}); Итак, это то, что у меня есть, но теперь приходит то, что я хочу, и, возможно, у одного из вас есть клоу, как этого добиться.
Я хотел бы создать опцию, чтобы панель отображалась по умолчанию или скрыта по умолчанию, и переключатель должен вести себя соответствующим образом. Это означало бы, что, если я решил показать панель по умолчанию, чтобы переключатель отображался как «активный», чтобы показать положение спрайта x. Если я решил скрыть панель по умолчанию, переключатель должен быть установлен на «неактивный», чтобы показать позицию + спрайт.

Надеюсь, я сделал себе достаточно ясно. ПОМОЩЬ очень ценится.

EDIT Ребята, вы правы. Требуется еще одно объяснение. Я просто хотел, чтобы это было как можно короче, но вот еще ...

Я создаю шаблон сайта, и покупатель шаблона должен иметь возможность включать эти панели для информационных целей. По умолчанию он должен настроить отображение панели и установить класс триггера «active». Это покажет мой маленький x для закрытия.
Но если покупатель шаблона добавит дополнительный класс «скрыть» к разметке панели, панель должна быть скрыта по умолчанию, а триггер не должен быть активным, так как в этом случае мой триггер покажет мало + для открытия этой панели , У меня появилась идея?

Answer 1

Где (и как настойчиво) вы сохраняете это значение по умолчанию? Как раз на клиенте для этого сеанса или на стороне сервера? Возможно, серверная сторона выглядит наиболее логичной для меня. Если это так, когда пользователь решил отобразить панель, добавьте класс в html info-panel-left. Предположим, что мы имеем то

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

Добавьте немного JavaScript поэтому он читает

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

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

(вы могли бы просто использовать 'активный' класс, а конечно)

EDIT: Хорошо; если мы просто придерживаемся части JS, я не думаю, что это сильно меняет подход, не так ли? Просто повернуть его вспять:

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

затем

$(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 ...