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

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

Navigation

#1 by (1 votes)

1

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

$('.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><aid="link1" class="teste">link1</a>
<a id="link2" class="teste">link2</a>

<div id="div1">

</div>

<div id="div2">

</div>

jquery toggle

asked by anonymous 05.07.2017 / 14:56

1 answer

What is the MERGE_MSG.swp file? How to put a div over another with responsive?

score 1 · Accepted Answer

You can check which link is being clicked to "toggle" 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><aid="link1" class="teste">link1</a>
<a id="link2" class="teste">link2</a>

<div id="div1">

</div>

<div id="div2">

</div>