Comment puis-je ajouter une classe aux panneaux ouverts?

Question

Quelqu'un peut-il m'aider? J'ai deux panneaux que j'utilise sur une page et je veux seulement que l'on montre à la fois, donc j'ai fait un ajustement à la js mais il ne semble pas ajouter la classe. Quelqu'un peut-il aider?

 
    $(document).ready(function() { 
     $("div.panel_buttonGal").click(function() { 
      $("div#panelGal").animate({ 
       height: "150px" 
      }).animate({ 
       height: "140px" 
      }, "slow"); 
      $("div.panel_buttonGal").toggle(); 
      $("div#panelGal").addClass("open"); 
     }); 

     $("div#hide_buttonGal").click(function() { 
      $("div#panelGal").animate({ 
       height: "0px" 
      }, "slow"); 
      $("div#panelGal").removeClass("open"); 
     }); 
     $("div.panel_buttonAbt").click(function() { 
      $("div#panelGal.open").animate({ 
       height: "0px" 
      }, "fast"); 
     }); 
    }); 

Le code HTML ressemble à ceci.

<pre><code> 
<div id="panelGal" class=""> 
    <div class="panel_contents"> </div> 
    <ul class="subnav"> 
      <li><a href="#">Engagements & Weddings</a></li> 
      <li><a href="#">Maternity & Newborns</a></li> 
      <li><a href="#">Seniors</a></li> 
      <li><a href="#">Portraits</a></li> 
      <li><a href="#">Photo Parties & Fundraisers</a></li> 
      <li><a href="#">Special Events</a></li> 
      </ul> 
    </div> 

    <div id="panelAbt" class=""> 
    <div class="panel_contents"> </div> 
     <ul class="subnav"> 
      <li><a href="#">Bio</a></li> 
      <li id="invest"><a href="#">Investment</a></li> 
      <li><a href="#">Details (FAQ)</a></li> 
      <li><a href="#">Testimonials</a></li> 
      <li><a href="#">Vendors We Love</a></li> 
      </ul> 
    </div> 

    <div id="nav"> 

     <div class="MainNav"><a href="#" class="rp">Home</a></div> 
     <div class="MainNav"><a href="#" class="rp">About You</a></div> 
     <div class="MainNav panel_buttonGal" style="display: visible;"><a class="rp">Galleries</a></div> 
     <div class="MainNav panel_buttonGal" id="hide_buttonGal" style="display: none;"><a class="rp">Galleries</a></div> 
     <div class="MainNav panel_buttonAbt" style="display: visible;"><a class="rp">About Us</a></div> 
     <div class="MainNav panel_buttonAbt" id="hide_buttonAbt" style="display: none;"><a class="rp">About Us</a></div> 
     <div class="MainNav"><a href="#" class="rp">The Latest</a></div> 
     <div class="MainNav"><a href="#" class="rp">Proof & Shop</a></div> 
     <div class="MainNav"><a href="#" class="rp">Contact Us</a></div> 

    </div> 

</code></pre> 

Answer 1

Utilisez hide() et show() à la place.

Answer 2

Au lieu d'ajouter une classe CSS et en utilisant Animate(), utilisez slideUp() et slideDown():

$(document).ready(function() { 
     $("div.panel_buttonGal").hide(); // initial state 
     $("div.panel_buttonGal").click(function() { 
      $("div#panelGal").slideDown("slow"); 
      $("div.panel_buttonGal").toggle(); 
     }); 

     $("div#hide_buttonGal").click(function() { 
      $("div#panelGal").slideUp("slow"); 
     }); 
     $("div.panel_buttonAbt").click(function() { 
      $("div#panelGal").slideUp("fast"); 
     }); 
    });