Как я могу добавить класс к открытым панелям?

Question

Может ли кто-нибудь помочь мне, у меня есть две панели, которые я использую на одной странице, и я хочу, чтобы только одна из них отображалась одновременно, поэтому я внес корректировку в js, но похоже, что класс не добавляется. Кто-нибудь может помочь?

    $ (документ).ready(function () {
        $("div.panel_buttonGal").click(function () {
            $("# DIV panelGal"). Анимировать ({
                высота: "150px"
            }). Анимировать ({
                высота: "140px"
            }, "медленный");
            $ ("Div.panel_buttonGal") переключения ().
            $ ("# DIV panelGal") addClass("открыть").
        });

        $ ("div # hide_buttonGal"). click (function () {
            $ ("# DIV panelGal"). Анимировать ({
                высота: "0px"
            }, "медленный");
            $ ("# DIV panelGal") removeClass("открыть").
        });
        $("div.panel_buttonAbt").click(function () {
            $("# DIV panelGal.open"). Анимировать ({
                высота: "0px"
            }, "быстро");
        });
    });

HTML выглядит так.

<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

Вместо этого используйте hide() и show().

Answer 2

Вместо добавления CSS-класса и использования animate (), используйте slideUp () и 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");
        });
    });