show/hide en los post
Posted on : 19-08-2007 | By : erufenix | In : PHP, Programación
0
Cuando escribo post muy largos en mi blog, no me gusta que estos ocupen una gran parte del blog; así que decidí investigar la manera de ocultar o mostrar parte del contenido.
Para word press hay muchos plugins que hacen esto, pero al probarlos no me gustaron ya que muchos de ellos recargan la pagina para mostrar el contenido restante de un post. Así que mejor decidí implementar algo por mi cuenta.
1. Empecemos por el css incluyendo el siguiente código.
.show { position:relative; display:none; } .hide { position:relative; display:block; }
2. Con javascript usaremos el siguiente script y el código.
function oculta3(id) { var elemento = document.getElementById(id); var state1="status1-"+id; var state2="status2-"+id; if (elemento.className == "show") { elemento.className = "hide"; xDisplay(state1,'none') xDisplay(state2,'block') } else { elemento.className = "show"; xDisplay(state1,'block') xDisplay(state2,'none') } }
3. En el html lo siguiente
<div id="status1-nombre"> <a href="javascript:oculta3('nombre');">mostrar</a> </div> <div id="status2-nombre" class="show" > <a href="javascript:oculta3('nombre');">ocultar</a> </div> <div id="nombre" class="show">Contenido oculto</div>
El primer div indica el mensaje que se mostrara cuando el contenido este oculto, el segundo div muestra lo contrario y el tercer div es donde estará el contenido a ocultar. Donde ‘nombre’ lo cambiaremos por el identificador del div que vayamos a usar.
Post relacionados: