I want to click on a link when I click Show a div and when I click on another link show another div and disappear the previous one

It's simple but I'm not getting it done. When I click on link1 show div1, and if I click on link2 show div2. And if I click link1 again with div1 showing it should disappear, I know I have to use toggle method but I'm not getting it.

$('.zik').click(function() {
  $("#div1").hide();
  $("#div2").hide();
});
$(".teste").click(function() {
  $("#div1").toggle(
    function() {
      //                            $("#treta").hide();
    },
    function() {
      //                            $("#treta").show();
    });
  $("#div2").toggle(
    function() {
      //                            $("#treta").hide();
    },
    function() {
      //                            $("#treta").show();
    });
});
#div1 {
  height: 200px;
  width: 200px;
  background-color: red;
}

#div2 {
  height: 200px;
  width: 200px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="link1" class="teste">link1</a>
<a id="link2" class="teste">link2</a>

<div id="div1">

</div>

<div id="div2">

</div>
Author: BrTkCa, 2017-07-05
Source

1 answers

You can check which link is being clicked to "togglar" the correct div: 

$(".teste").click(function() {
  if ($(this).attr('id') == 'link1') {
    $("#div1").toggle();
    $("#div2").hide();
  } else {
    $("#div2").toggle();
    $("#div1").hide();
  }
});
#div1 {
  height: 200px;
  width: 200px;
  background-color: red;
}

#div2 {
  height: 200px;
  width: 200px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="link1" class="teste">link1</a>
<a id="link2" class="teste">link2</a>

<div id="div1">

</div>

<div id="div2">

</div>
 1
Author: BrTkCa, 2017-07-05 13:08:51