views:

47

answers:

2

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>
A: 

Use hide() and show() instead.

Visionary Software Solutions
use show() hide() how?
Ashlee
Assuming your open style is a wrapper for display:none, replace $("div#panelGal").addClass("open");with $("div#panelGal").show(); and the removeClass with .hide(). If you have other properties being set in that style (font, color), use jQuery to set them inside of the optional function() parameters
Visionary Software Solutions
A: 

Instead of adding a CSS class and using animate(), use slideUp() and 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");
        });
    });
Hollister