I have two slide panel in the same page. Need that, when one is open and the and user clicks on the other one, that makes, at the same time, close the first one when opening the second. Now they are overlapping...

Can you help me, please? thanks

This is what i have on the page:

I have two slide panel in the same page. Need that, when one is open and the and user clicks on the other one, that makes, at the same time, close the first one when opening the second. Now they are overlapping...

Can you help me, please? thanks

This is what i have on the page

<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">

$(document).ready(function(){
$(".btn-slide").click(function(){
    $("#panel").slideToggle('fast');
  $("#panel2").slideToggle("fast");
  $(this).toggleClass("active");
});
});

$(document).ready(function(){
$(".btn-slide2").click(function(){
  $("#panel2").slideUp('fast');
  $("#panel").slideToggle("fast");
  $(this).toggleClass("active");
});

</script>