Al parecer tienes que cambiarlo todo.
Hace tiempo escribí este código que hace lo que quieres pero es especificamente para un sitio web por lo que necesitarás adaptarlo a tu propio sitio y a tus propias necesidades. Espero que te sirva por lo menos para darte una idea de como se hace:
Código javascript
:
Ver originalvar info = {
addEvent: function(elem, evType, func, useCapture){
if(elem.addEventListener){
elem.addEventListener(evType, func, useCapture);
return true;
}else if(elem.attachEvent){
var r = elem.attachEvent('on' + evType, func);
return r;
}else{
elem['on' + evType] = func;
}
},
init: function(){
var infodiv = document.getElementById('info_libro');
var libro = document.getElementById('elLibro');
info.altura = infodiv.offsetHeight;
info.efecto();
info.addEvent(libro, 'click', info.efecto, false);
},
efecto: function(){
if(info.abierto == false){
clearInterval(info.intervalo);
info.muestra();
info.abierto = true;
}else if(info.abierto == true){
clearInterval(info.intervalo);
info.oculta();
info.abierto = false;
}
},
muestra: function(){
var infodiv = document.getElementById('info_libro');
infodiv.style.height = '0px';
infodiv.style.overflow = 'hidden';
info.intervalo = setInterval(function(){ info.redimenciona(info.altura); }, 1);
},
oculta: function(){
var infodiv = document.getElementById('info_libro');
infodiv.style.height = infodiv.offsetHeight + 'px';// establesco la altura por que js no la lee a menos que haya sido establecida antes.
infodiv.style.overflow = 'hidden';
info.intervalo = setInterval(function(){ info.redimenciona(0); }, 1);
},
redimenciona: function(limite){
var infodiv = document.getElementById('info_libro');
inicial = parseInt(infodiv.style.height);
actual = Math.ceil((limite - inicial)/4);
inicial += actual;
infodiv.style.height = inicial + 'px';
if(parseInt(infodiv.style.height) >= (limite - 5) && parseInt(infodiv.style.height) <= (limite + 5)){
clearInterval(info.intervalo);
infodiv.style.height = limite + 'px';
}
},
abierto: true
}
info.addEvent(window, 'load', info.init, false);