Foros del Web - Ver Mensaje Individual

emprear · #6 (**permalink**) 04/02/2013, 15:39

Bien por el intento, pero lo estás complicando un poco. Primero te aclaro que estas técnicas de alternar las propiedades css de un elemento en forma alternada con el click del mouse son muy variadas, y los ajustes pueden cambiar en detalles.

Para tu caso en particular, este ejemplo creo que sirve

Código HTML:

Ver original<!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>
<title>Ver ocultar detalles</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body{
 font-family: arial, sans-serif;
 font-size: 11pt;
}
 
.faqs {  
 text-overflow: ellipsis;
 overflow: hidden;
 width: 500px;
 white-space: nowrap;
 padding: 3px;
 background: #DFD2C8;
}
 
.ver{
 cursor: pointer;
 font-size: 11px;
 font-weight: bold;
 margin-bottom: 10px;
 padding: 3px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function mostrarOcultar(elDiv,e){
var miCapa=document.getElementById(elDiv).style.overflow;
if(miCapa=="auto"){
document.getElementById(elDiv).style.overflow="hidden";
document.getElementById(elDiv).style.whiteSpace = 'nowrap';
e.innerHTML = 'ver detalles';
}else{ 
document.getElementById(elDiv).style.overflow="auto";
document.getElementById(elDiv).style.whiteSpace = 'normal';
e.innerHTML = 'ocultar detalles';
}
}
//]]>
</script>
</head>
<body>
<div id="comentario_01" class="faqs">
Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque
vitae adipiscing sem. Phasellus velit enim, consequat id pharetra id, adipiscing in turpis 
</div>
<div onclick="mostrarOcultar('comentario_01',this)" class="ver">ver detalles</div>
 
 
<div id="comentario_02" class="faqs">
Vestibulum lacus diam, pellentesque in faucibus eget, dapibus sed sem. Integer id justo id tortor varius tempus. Aliquam
dui tellus, consequat sed molestie in, facilisis eget nisi. 
</div>
<div onclick="mostrarOcultar('comentario_02',this)" class="ver">ver detalles</div>
 
</body>
</html>

Si vas a generar los textos en forma dinámica (desde una bd, por ejemplo) asegurate de crear id distintos para cada una y modificar el primer parámetro en la llamada de la función en el texto "ver detalles" para que coincida con el que corresponda

Demo
http://foros.emprear.com/javascript/...detalles.phtml

SAludos