<style>
.box {
float: left;
width: 30px;
height: 30px;
border: 1px solid red;
}

.clear {
clear: both;
}

.containerr {
width: 254px;
height: 100px;
border: 1px solid blue;
display: none;
}
</style>
<script>
function goster(element)
{
var containers = document.getElementsByClassName('containerr');


for (var i = 0; i < containers.length ; i++)
{
containers.item(i).style.display = 'none';
}

document.getElementById('div_'+element.id).style.display = 'block';



}
</script>

<div>
<div onClick="goster(this)" class="box" id="1">1</div>
<div onClick="goster(this)" class="box" id="2">2</div>
<div onClick="goster(this)" class="box" id="3">3</div>
<div onClick="goster(this)" class="box" id="4">4</div>
<div onClick="goster(this)" class="box" id="5">5</div>
<div onClick="goster(this)" class="box" id="6">6</div>
<div onClick="goster(this)" class="box" id="7">7</div>
<div onClick="goster(this)" class="box" id="8">8</div>
<div class="clear"></div>
</div>

<div>
<div class="containerr" id="div_1">1 div</div>
<div class="containerr" id="div_2">2 div</div>
<div class="containerr" id="div_3">3 div</div>
<div class="containerr" id="div_4">4 div</div>
<div class="containerr" id="div_5">5 div</div>
<div class="containerr" id="div_6">6 div</div>
<div class="containerr" id="div_7">7 div</div>
<div class="containerr" id="div_8">8 div</div>
</div>

<div>
<div onClick="goster(this)" class="box" id="9">1</div>
<div onClick="goster(this)" class="box" id="10">2</div>
<div onClick="goster(this)" class="box" id="11">3</div>
<div class="clear"></div>
</div>

<div>
<div class="containerr" id="div_9">1 div</div>
<div class="containerr" id="div_10">2 div</div>
<div class="containerr" id="div_11">3 div</div>
</div>