Adding div when clicking on anchor and removing div when clicking either outside of it or on a different anchor

Question

I have two anchor tags that both display two different divs when clicked on but I only want to display one div at a time. I also want to hide the div that is displayed when clicking outside of it. I am almost done but when i click on the first anchor and then on the second both divs are displayed (I want one at a time).

Here is my code:

//Display and hide div number 1

$("a.number_1").on("click", function(event) {
  event.preventDefault();
  $(".display_div_1").toggle();
  event.stopPropagation();
});

$(".display_div_1").on("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
});

$(".body").on("click", function(event) {
  event.preventDefault();
  $(".display_div_1").hide();
});

//Display and hide div number 2

$("a.number_2").on("click", function(event) {
  event.preventDefault();
  $(".display_div_2").toggle();
  event.stopPropagation();
});

$(".display_div_2").on("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
});

$(".body").on("click", function(event) {
  event.preventDefault();
  $(".display_div_2").hide();
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_div_1 {
  display: none;
}

div.display_div_2 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <ul>
    <li>
      <a href="" method="POST" class="display number_1">Display div 1</a>
    </li>
    <li>
      <a href="" method="POST" class="display number_2">Display div 2</a>
    </li>
  </ul>
  <div id="first" class="display display_div_1">
    This is div 1!
  </div>
  <div id="second" class="display display_div_2">
    This is div 2!
  </div>


</div>

My jquery code was taken from the first answer from the post: https://stackoverflow.com/questions/30...

Thank you!

ControlAltDel · Answer 1 · 2017-04-14T15:07:25.323

0

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='div1' class="number">Display div 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='div2' class="number">Display div 2</a>
    </li>
  </ul>
  <div id="1" class="display display_div_1">
    This is div 1!
  </div>
  <div id="2" class="display display_div_2">
    This is div 2!
  </div>

</div>
</body>

With script

$( document ).ready(function() {
    $('.number').click(function() {
      $('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
      $('.body').show();
      $('.number').show();
      $('#' + this.id.substring(3)).show(); //show just the div you want to show
    });
});

edited Apr 14 '17 at 15:07

answered Apr 14 '17 at 13:22

ControlAltDel

33,923
10
53
80

I am sorry but I still don't manage to get it to work. I removed my jquery code and added yours and also removed my html code and added yours but now the divs are not even appearing when clicking on the anchors. Can you maby show me in a jsfiddle? Here is what happened when i added your code [https://jsfiddle.net/5r8q3e95/](https://jsfiddle.net/5r8q3e95/) – Night83 Apr 14 '17 at 14:45
Thank you! Almost perfect. Now it only displays one div at a time but when i press outside of the div the divs do not hide. Here is the jsfiddle file with your modifications included [jsfiddle.net/3svmwmz8/](https://jsfiddle.net/3svmwmz8/) – Night83 Apr 14 '17 at 16:14

score 0 · Answer 2 · edited May 23 '17 at 12:02

Found the answer in this post: Use jQuery to hide a DIV when the user clicks outside of it

 $('a#div1').click(function() {
   $("div#1").show();
  });
  $('a#div2').click(function() {
   $("div#2").show();
  });
   $('a#div3').click(function() {
   $("div#3").show();
  });

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('.display_div_1'));
    container.push($('.display_div_2'));
    container.push($('.display_div_3'));
    
    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_div_1 {
  display: none;
}

div.display_div_2 {
  display: none;
}

div.display_div_3 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 100px;
  height: 100px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='div1' class="number">Display div 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='div2' class="number">Display div 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='div3' class="number">Display div 3</a>
    </li>
  </ul>
  <div id="1" class="display display_div_1">
    This is div 1!
  </div>
  <div id="2" class="display display_div_2">
    This is div 2!
  </div>
  <div id="3" class="display display_div_3">
    This is div 3!
  </div>

</div>
</body>

Adding div when clicking on anchor and removing div when clicking either outside of it or on a different anchor

2 Answers2