<html>
<head>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
var info = {
captura_objeto : function(idnombre) {
if (ns6)
{
return document.getElementById(idnombre);
}
else if (ie4)
{
return document.all[idnombre];
}
else if (ns4)
{
return document.layers[idnombre];
}
else
{
return null;
}
},
Evento : function(elemento,nomevento,funcion) {
if (elemento.attachEvent)
{
var fct=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,fct);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,false);
return true;
}
else
return false;
},
PosicionAbsolutaElemento: function(element) {
if (typeof element == "string")
element = info.captura_objeto(element)
if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
},
init: function(){
var ref = info.captura_objeto('lasLigas').getElementsByTagName('A');
for (var i = 0; i < ref.length; i++) {
//alert(ref[i].id)
var infodiv = info.captura_objeto('info_menu_'+ref[i].id);
//infodiv.style.width = '42%';
info.altura = infodiv.clientHeight;
infodiv.style.display = 'none';
//infodiv.style.overflow = 'hidden';
//infodiv.style.zIndex = 1000;
info.Evento(ref[i], 'click', function() {info.efecto(this.id)});
}
},
efecto: function(id){
info.captura_objeto('info_menu_'+id).style.display == 'none'
//alert("Estado - " + info.abierto);
if(info.captura_objeto('info_menu_'+id).style.display == 'none'){
//alert("Estado - true");
clearInterval(info.intervalo);
info.muestra(id);
info.abierto = false;
}else{
//alert("Estado - false");
clearInterval(info.intervalo);
info.oculta(id);
info.abierto = true;
}
},
muestra: function(id){
//alert(id)
var infodiv = info.captura_objeto('info_menu_'+id);
var PosElemento = info.PosicionAbsolutaElemento(id);
//alert("Left - " +PosElemento.left+ " Top - " + PosElemento.top);
infodiv.style.height = '1px';
infodiv.style.left = PosElemento.left +'px';
infodiv.style.top = parseInt(PosElemento.top+21) +'px';
infodiv.style.display = 'block';
info.intervalo = setInterval(function(){ info.redimenciona(info.altura,id); }, 1);
},
oculta: function(id){
var infodiv = info.captura_objeto('info_menu_'+id);
infodiv.style.height = info.altura + 'px';
info.intervalo = setInterval(function(){ info.redimenciona(0,id); }, 1);
},
redimenciona: function(limite,id){
var infodiv = info.captura_objeto('info_menu_'+id);
inicial = parseInt(infodiv.style.height);
actual = Math.ceil((limite - inicial)/4);
inicial += actual;
infodiv.style.height = inicial + 'px';
if (parseInt(inicial) >= (limite - 5) && parseInt(inicial) <= (limite + 5)) {
if (info.abierto == false) {
infodiv.style.height = limite + 'px';
clearInterval(info.intervalo);
} else {
infodiv.style.height = '0px';
infodiv.style.display = 'none';
clearInterval(info.intervalo);
}
}
},
abierto: true
}
info.Evento(window, 'load', info.init);
</script>
</head>
<body>
<div id="lasLigas">
<a href="javascript:void(0);" id="1">Mostrar Menú 1</a>
<a href="javascript:void(0);" id="2">Mostrar Menú 2</a>
<a href="javascript:void(0);" id="3">Mostrar Menú 3</a>
<a href="javascript:void(0);" id="4">Mostrar Menú 4</a>
</div>
<div id="info_menu_1" style="position:absolute; left:0px; top:0px; width:42%; overflow:hidden; z-index:1000; font:bold 11px Arial, Helvetica, sans-serif; background-color:#EEEEEE; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón
</div>
<div id="info_menu_2" style="position:absolute; left:0px; top:0px; width:42%; overflow:hidden; z-index:1000; font:bold 11px Arial, Helvetica, sans-serif; background-color:#EEEEEE; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón
</div>
<div id="info_menu_3" style="position:absolute; left:0px; top:0px; width:42%; overflow:hidden; z-index:1000; font:bold 11px Arial, Helvetica, sans-serif; background-color:#EEEEEE; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón
</div>
<div id="info_menu_4" style="position:absolute; left:0px; top:0px; width:42%; overflow:hidden; z-index:1000; font:bold 11px Arial, Helvetica, sans-serif; background-color:#EEEEEE; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón<br />
Un texto que quiero ocultar y mostrar con el botón
</div>
</body>
</html>