How do I get a currently visible (default hidden) slideToggle() .div to close when another is opened?

Question

So I have close to what I would like to achieve, including having my slideToggle .divs close when I click anywhere off of the "link" divs (.click, .click2) with one glaring exception...

When I click "Link 1" it does what I'd like and displays .showup then if I click "Link 2" it also initially does what I'd like and displays .showup2 over .showup BUT I need .showup to close so that they aren't both open at the same time.

As you can see with my provided code this presents a problem bc with both "showup" divs already open if I then directly click "Link 1" again .showup remains hidden behind .showup2

Similarly, in the above example if I click "Link 2" first, .showup2 opens but when I then directly click "Link 1", .showup does not appear over .showup2

So ultimately I would like my slideToggle divs to hide when I click ANYWHERE outside of my "Link" divs (.click and .click2) - which it currently does - however that ANYWHERE should include my other script instructed "Link" divs!! And that is where I am stumped.

Here is code that demonstrates in a very simplified example :

HTML

<div class="click">Link 1</div> <div class="click2">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup2">something else I want to show</div>

SCRIPT

$(document).ready(function(){
    $('.click').click(function(event){
        event.stopPropagation();
         $(".showup").slideToggle("fast");
    });

});

$(document).on("click", function () {
    $(".showup").hide();
});


$(document).ready(function(){
    $('.click2').click(function(event){
        event.stopPropagation();
         $(".showup2").slideToggle("fast");
    });

});

$(document).on("click", function () {
    $(".showup2").hide();
});

CSS

body{margin:50px;}

.showup,
.showup2 { width:100%;height:100px; background:red; display:none; position: fixed;}

.click,
.click2 { cursor:pointer; display:inline-block; padding: 0 15px;}

Thanks so much for any help! Jorie

Answer 1

You could do with same class name of the button and boxes .data-target attr used for target the which element to toggling .

Updated

1. Toggle function with each button
2. Bold text toggle function added

$(document).ready(function() {
  $('.click').click(function(event) {
    event.stopPropagation();
    if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){
    $(".showup").eq($(this).attr('data-target')).slideUp();
      $('.click').removeClass('bold')
    }
    else{
      $(".showup").hide();
       $('.click').removeClass('bold')
    $(".showup").eq($(this).attr('data-target')).slideToggle("fast");
      $(this).toggleClass('bold')
    }
  });
}).on('click',function(){
$(".showup").hide();
  $('.click').removeClass('bold')
})

body {
  margin: 50px;
}

.showup{
  width: 100%;
  height: 100px;
  background: red;
  display: none;
  position: fixed;
}
.bold{
font-weight:bold;
}

.click{
  cursor: pointer;
  display: inline-block;
  padding: 0 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" data-target="0">Link 1</div>
<div class="click" data-target="1">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup">something else I want to show</div>