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

Question

It’s simple, but I can’t do it. When I click on the link1 show the div1, and if I click on the Link2 show the div2. And if I click on the link1 again with the div1 showing it should disappear, I know I have to use the 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>

Answer 1

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

$(".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>