Can anyone help me I have two panels I’m using on one page and I only want one to show at a time so I made an adjustment to the js but it doesn’t seem to be adding the class. Can anyone help?
$(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"); }); });
HTML looks like this.
<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>