vale, creo que ya he descubierto la manera
: D
se trata de ir haciendo funciones de java script, de las cuales 3 muestran el contenido y 6 lo ocultan. ose dejo el código para compartir mi descubrimiento.
no obstante, si a alguien se le ocurre una forma más eficaz de resolverlo, me gustaría verlo.
un saludo
Código PHP:
<style type="text/css">
#ID {
background-color:red;
position:absolute; top:100px; left:50px;
width:100px;
height:70px;
padding:10px;
}
#ID2 {
background-color:green;
position:absolute; top:100px; left:50px;
width:100px;
height:70px;
padding:10px;
}
#ID3 {
background-color:blue;
position:absolute; top:100px; left:50px;
width:100px;
height:70px;
padding:10px;
}
#cubridor {
position:fixed; top:0px; left:7px;
background-color:rgba(0,0,0,0);
width:55px;
height:30px;
}
#cubridor2 {
position:fixed; top:0px; left:63px;
background-color:rgba(0,0,0,0);
width:55px;
height:30px;
}
#cubridor3 {
position:fixed; top:0px; left:119px;
background-color:rgba(0,0,0,0);
width:55px;
height:30px;
}
</style>
<script>
function OTROID(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal';
}
function OTROID2a(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal';
}
function OTROID3a(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal';
}
function OTROID2(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses';
}
function OTROIDa(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses';
}
function OTROID3b(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses';
}
function OTROID3(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio';
}
function OTROIDb(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio';
}
function OTROID2b(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'none') ? 'none' : 'none';
enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio';
}
</script>
<a href="#" onclick="OTROID(this,'ID'), OTROID2a(this,'ID2'), OTROID3a(this,'ID3'); return false" />Principal</a>
<a href="#" onclick="OTROID2(this,'ID2'), OTROIDa(this,'ID'), OTROID3b(this,'ID3'); return false" />Intereses</a>
<a href="#" onclick="OTROID3(this,'ID3'), OTROID2b(this,'ID2'), OTROIDb(this,'ID'); return false" />Espacio</a>
<div id="ID" style="display:block"> <div id="cubridor"></div>Este texto se verá cuando yo quiera </div>
<div id="ID2" style="display:none"> <div id="cubridor2"></div>Este texto se verá cuando yo quiera 2</div>
<div id="ID3" style="display:none"> <div id="cubridor3"></div>Este texto se verá cuando yo quiera 3</div>
PD: suprimiré un botón, ya que sino tendré que hacer 16 funciones para el menucito :S