Question

I’m using the code below to make a box appear when certain text is clicked. How do i limit it so only one box can be slid down at a time.

E.g. if i click the first button it slides down, then if i click the second button the first box slides up again?

Here’s my code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip1").click(function(){
    $(".panel1").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip2").click(function(){
    $(".panel2").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip3").click(function(){
    $(".panel3").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip4").click(function(){
    $(".panel4").slideDown("fast");
  });
});
</script>



<div id="betslip">
                <td><div class="panel1"><?php echo $bet1; ?></div></td>
                <td><div class="panel2"><?php echo $bet2; ?></div></td>
                <td><div class="panel3"><?php echo $bet3; ?></div></td>
                <td><div class="panel4"><?php echo $bet4; ?></div></td>
            </div>

Answer 1

You can refactor and minimize your code like this:

$(document).ready(function(){
  $("[class=^'flip'").click(function(){
    // get panel class
    var panelClass = this.className.replace('flip', 'panel');
    // hide all open
    $("[class^='panel']").hide();
    // show current one now
    $('.' + panelClass).slideDown('fast');
  });
});

That’s all you need.