Question

I have a series of buttons that trigger a JQuery animation, where panels slide up below the bottom of the page. The panels are absolutely positioned beloe the page, and when a button is clicked, it’s corresponding panel animates up.

The functionality works great, but I only want to be able to show one panel at any given time.

My HTML is:

<div id="footerNav">
<a class="button" id="b1" href="#"><span></span>Upcoming Events</a>
<a class="button" id="b2" href="#"><span></span>From the Blog</a>
<a class="button" id="b3" href="#"><span></span>Global Leaders</a>
<a class="button" id="b4" href="#">Watch Video</a>
</div>

<div id="paneb1" class="pane"></div>
<div id="paneb2" class="pane"></div>
<div id="paneb3" class="pane"></div> 

My Jquery is:

$("a.button").toggle(function(){
     idClick = $(this).attr("id");
     newSelector = $("#pane"+idClick);
     newSelector.animate({ 'bottom' : 99});
     $(this).addClass("activeBtn");
}, function(){
     newSelector.animate({ 'bottom' : -275});
     $(this).removeClass("activeBtn");
});

I tried using the not selector like so, but it did not work:

$(".pane:not(newSelector)").animate({ 'bottom' : -275});

What do I need to do here in order to animate any OTHER panel back down to its original position when a button is toggled?

Answer 1

You may use not() method instead of :not() selector:

$(".pane").not(newSelector).animate({ bottom : -275 });

Note, it is better to use local variables instead of the global ones, so consider using var keyword when defining a new variable:

var newSelector = $("#pane" + idClick);