korifey,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
.show {width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
.show.open {
display: block;
}
</style>
</head>
<body>
<div class="btn">b1</div>
<div class="btn">b2</div>
<div class="btn">b3</div>
<div class="btn">b4</div>
<div class="btn">b5</div>
<div class="btn">b6</div>
<br><br><br>
<div class="show">block button 1</div>
<div class="show">block button 2</div>
<div class="show">block button 3</div>
<div class="show">block button 4</div>
<div class="show">block button 5</div>
<div class="show">block button 6</div>
<script>
let open;
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let elem;
if(target = target.closest('.btn')) {
const btn = document.querySelectorAll('.btn');
const index = Array.prototype.findIndex.call(btn, el => el === target);
elem = document.querySelectorAll('.show')[index];
if(!elem) return;
elem.classList.toggle('open');
}
if(open && open != elem) open.classList.remove('open');
open = elem;
})
</script>
</body>
</html>