jQuery: How to hide DIV with slideToggle function

Question

I need to modify following script. When is .toggle1 clicked and .area1 displayed, I need to hide .area1 and show only .area2, when .toggle2 clicked. Any ideas? Thanks!

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>

Answer 1

Here you go you need to just .hide the respective textarea in the click function

See the demo below

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    $(".area2").hide();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    $(".area1").hide();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>