Question

I’m creating slide out panels for menu items so when one button is clicked a panel slides out. What I need is a way to make the opened panel close when another button is clicked to open a different panel. Here’s what I have.

<script type="text/javascript">
  $(document).ready(function(){
$(".trigger").click(function(){
            $(this).prev('.panel').toggle("fast");
    $(this).toggleClass("active");
    return false;
});
  });
</script>
<div id="menu-filter">
 <div class="panel">
<-----content A----->
 </div>
 <a class="trigger" href="#">A</a>

 <div class="panel">
<-----content B----->
 </div>
 <a class="trigger" href="#">B</a>
</div>

Answer 1

for me this makes things a little easier
wrap each panel/button in a container div

<div id="menu-filter">
  <div class="panel-container">
    <div class="panel">
      <-----content A----->
    </div>
    <a class="trigger" href="#">A</a>
  </div>
  <div class="panel-container">
    <div class="panel">
      <-----content B----->
    </div>
    <a class="trigger" href="#">B</a>
  </div>
</div>

then

$(".trigger").click(function(e) {
  e.preventDefault();

  // clicked button
  var $button = $(this);
  // get ref to panel, go up to parent container and back down to find panel
  var $panel = $(this).closest("panel-container").find("panel");

  if ($button.hasClass("active")) {
    // we hide the open panel for this button
    $panel.hide("fast");
    $button.removeClass("active");
  } else {
    // hide any open panels
    $('.panel').hide("fast");
    $('.trigger').removeClass("active");

    // show clicked
    $panel.toggle("fast");
    $button.toggleClass("active");
  }
});

using closest and find can allow the markup to change later without breaking the javascript, however if you had 1000s of panels it might not perform so well

this code has not been tested