Deberìas añadir un atributo a los divs para agruparlos y poder mostrar u ocultar las capas correspondientes, por ejemplo agregando un atributo
rel.
Hice este ejemplo para que tengas una idea, los links 'buttonDiv' muestran las capas que contienen el atributo grupo
X_div y que contienen el nombre de clase del atributo href 'div_a_mostrar_
x'
Código HTML:
Ver original<a class="buttonDiv" href="#div_a_mostrar_1" rel="grupo1">1
</a> <a class="buttonDiv" href="#div_a_mostrar_2" rel="grupo1">2
</a> -
<a class="buttonDiv" href="#div_a_mostrar_1" rel="grupo2">3
</a> <a class="buttonDiv" href="#div_a_mostrar_2" rel="grupo2">4
</a>
<div class="div_a_mostrar_1" rel="grupo1_div"> <div class="content">Div 1 grupo 1
</div> <div class="div_a_mostrar_2" rel="grupo1_div"> <div class="content">Div 2 grupo 1
</div>
<div class="div_a_mostrar_1" rel="grupo2_div"> <div class="content">Div 1 grupo 2
</div> <div class="div_a_mostrar_2" rel="grupo2_div"> <div class="content">Div 2 grupo 2
</div>
Código Javascript
:
Ver originalfunction hasClass(el,clase){return el.className.match(new RegExp('(\\s|^)'+clase+'(\\s|$)'))}
function muestra_oculta(clase,rel){
var D = document.getElementsByTagName('*'), i;
for(i=0;i<D.length;i++){
if(D[i].getAttribute('rel') == rel + "_div"){
D[i].style.display = 'none';
if(hasClass(D[i],clase)) D[i].style.display = D[i].style.display == 'none' ? 'block' : 'none';
}
}
}
(function(clases,id){
var d = document, z = d.getElementById(id), b = z.getElementsByTagName('a'), x;
for(x=0;x<b.length;x++){
if(hasClass(b[x],clases)){
b[x].onclick = function(){
var c = this.href ? this.href.split(/#/)[1] || '_' : '_';
muestra_oculta(c,this.getAttribute('rel'))
}
}
}
})('buttonDiv','buttons');
muestra_oculta('div_a_mostrar_1','grupo1')
muestra_oculta('div_a_mostrar_1','grupo2')