jQuery toggle between unrelated divs on click

Question

I'm trying to toggle the slidingDiv in the slides wrapper when the btn is pressed. I'm not sure if I need data-attributes or how I can toggle between slides on click.

$('.show_hide').on("click", function() {
  $('.slidingDiv').stop().slideUp('fast');
  $(this).next('.slidingDiv').stop().slideToggle('fast');
});

.btn-wrap {
  display: flex;
}

.btn {
  cursor: pointer
}

.slides {
  border: 2px solid;
}

.slide {
  height: 200px;
  width: 200px;
  display: none;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-wrap">
  <div class="btn">Butt1</div>
  <div class="btn">Butt2</div>
</div>
<div class="slides">
  <div class="slide">For Butt1</div>
  <div class="slide">For Butt2</div>
</div>

Answer 1

update your codes by following

$(function(){
    $('.btn').on("click", function(){
        var $this = $(this);        
        $('.slide').slideUp('fast',function(){
            $(this).filter('[data-btnid="'+$this.data('btnid')+'"]').slideDown();
        });
    });    
});

.btn-wrap {
    display: flex;
}
.btn {
    cursor: pointer
}
.slides {
    border: 2px solid;
}
.slide {
    position: absolute;
    height: 200px;
    width: 200px;
    float: left;
    display: none;
    border: 1px solid;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-wrap">
    <div class="btn" data-btnid="1">Butt1</div>
    <div class="btn" data-btnid="2">Butt2</div>
</div>
<div class="slides">
    <div class="slide" data-btnid="1">For Butt1</div>
    <div class="slide" data-btnid="2">For Butt2</div>
</div>