JQuery Sliding Panel - Кнопки не делают его невидимым при щелчке, а панель открыта при загрузке.

Question

Я пытался выяснить, как я смогу сделать скользящую панель правильно. Скользящая часть панели работает безупречно, мои проблемы:

• Панель расширяется при нагрузке.
• Кнопки (две разные кнопки), которые, как предполагается, закрываются/открываются, не скрываются после нажатия.

Поэтому в основном то, что я пытаюсь достичь:

1. Открыть веб-страницы.
2. Нажмите кнопку «Открыть» -> кнопка «Открыть» Исчезает
3. Кнопка «закрыть» появляется
4. панель скользит вниз.

Что я имею:

1. Открыть веб-страница -> Панель уже продлены.
2. Нажмите кнопку «Открыть».

3. Ничего не происходит.

   Кнопка закрытия не отображается, и панель не тронута. Вот мое кодирование:

HTML код:

  <div id="toggle" style="list-style: none;"> 
       <input id="open" class="open" href="#" type="button" value="Open" /> 
       <input id="close" style="display: none;" class="close" href="#" type="button" value="Close" />    
      </div> 

JQuery:

$(document).ready(function() { 

     $("#open").click(function(){ 
      $("div#panel").slideDown("slow"); 
     }); 

     $("#close").click(function(){ 
      $("div#panel").slideUp("slow"); 
     });  

     $("#toggle a").click(function() { 
      $("#toggle a").toggle(); 
     });  

    }); 

Я был бы признателен какой-либо помощи. Спасибо.

Answer 1

Прежде всего, в вашем HTML код, который вы не добавили #panel, и вы не добавили CSS
Я понятия не имею, что делать вы хотите иметь в своем #panel, но я сделал что-то вроде этого:
Here
Надеюсь, это будет полезно.