Попытался так
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#b1,#b4,#b5,#b6,#b3,#b2{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
.cat-all,.mcat-all,.misk,.men1,.msor,.isk{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
</style>
</head>
<body>
<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<div id="b5">b5</div>
<div id="b6">b6</div>
<br><br><br>
<div class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="isk">block button 3</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>
<script>
var rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
var timeVar='';
document.addEventListener('click', e => {
for(var i=0;i<rels.length;i++){
var kn = document.querySelector(rels[i][0]);
var block=document.querySelector(rels[i][1]);
if(kn.contains(e.target)){
if(block.style.display == "block")
{
block.style = "display: none";
}
else
{
block.style = "display: block"; timeVar = 1;
}
}
if(e.target==block){
timeVar=1;
}
if(!block.contains(e.target) && block.style.display=='block') {if(!timeVar)
{
block.style = "display: none";
}
if(timeVar) {timeVar='';}}
if(kn==e.target){break;}
}
}, false);
</script>
</body>
</html>
но работает коряво, особенно кнопки с одинаковыми блоками.