Spoiler div con HTML and Javascript
April 20th, 2010 | 
Author: En muchas ocasiones disponemos de un texto largo que no queremos mostrar por completo en nuestra página. Únicamente queremos mostrar una parte de ese texto y, en caso de que al usuario le interese leer esta información completa, pueda darle a un enlace que “desplegue” el contenido de ese texto por completo. Lo que se llama información bajo demanda.
Bien, esto es muy fácil de conseguir. Aquí os dejo un ejemplo de cómo hacerlo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide/show text in a div example</title>
<script type="text/javascript">
function desplegar1(div_txt,div_mas,div_menos){
document.getElementById(div_txt).style.height="100%";
document.getElementById(div_mas).style.display="none";
document.getElementById(div_menos).style.display="block";
}
function plegar1(div_txt,div_mas,div_menos){
document.getElementById(div_txt).style.height="20px";
document.getElementById(div_mas).style.display="block";
document.getElementById(div_menos).style.display="none";
}
</script>
</head>
<body>
<div id="div_resumen_txt" style="height:20px; display:block; border:1px; overflow:hidden;">
Este es el resumen que blablabla ....<br />
Este es el resumen que blablabla segunda linea....<br />
Este es el resumen que blablabla tercera linea....<br />
Este es el resumen que blablabla cuarta linea ....<br />
</div>
<div id="boton_mas" style="display: block;">
<a href="#" onclick="desplegar1('div_resumen_txt','boton_mas','boton_menos')" title="Cerrar info">Ver todo</a>
</div>
<div id="boton_menos" style="display: none;">
<a href="#" onclick="plegar1('div_resumen_txt','boton_mas','boton_menos')" title="Cerrar info">Ver menos</a>
</div>
</body>
</html> |
Podéis ver el ejemplo funcionando en este link.
Related posts:
Posted in 
Tags: