JMiur [E]

Hace unos días, A su Imaginación me preguntaba por la forma en que mostraba y ocultaba elementos en la sidebar y es el momento de intentar una respuesta.

Hay tres modelos diferentes, uno en Autopromo, otro en el Buscador y el último en Archivos. Vamos con el primero que es el más sencillo de implementar. Sólo necesitamos un poco de CSS y un pequeño script que agregamos en la plantilla antes de </head> y que nos permite permutar la propiedad de un elemento entre dos estados, oculto y visible, cambiando la propiedad display.
<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
... propiedades de estilo para fuentes o imágenes ...
}
.linkExpandido {
... propiedades de estilo para fuentes o imágenes ...
}
</style>

<script type='text/JavaScript'>
function desplegarContraer(cual,desde) {
var elElemento=document.getElementById(cual);
if(elElemento.className == &#39;elementoVisible&#39;) {
elElemento.className = &#39;elementoOculto&#39;;
desde.className = &#39;linkContraido&#39;;
} else {
elElemento.className = &#39;elementoVisible&#39;;
desde.className = &#39;linkExpandido&#39;;
}
}</script>
La idea es sencilla, tenemos dos bloques DIV; en uno hay un enlace y en el otro el contenido a mostrar/ocultar. El enlace tiene, por defecto la clase linkContraido y el contenido, la clase elementoOculto. Cuando hacemos click en el enlace, el script cambia las clases de ambos, es decir, sus propiedades. El enlace será de la clase linkExpandido y el contenido de la clase elementoVisible. De esta manera, en un solo paso hacemos visible el contenido y podemos cambiar la forma de ver el enlace.

Supongamos que estas son las propiedades del enlace:

.linkContraido {color: blue;}
.linkExpandido {color: red;}

Se mostrará en color azul. Cuando hacemos click, se pondrá rojo y se mostrará el contenido. Lo mismo podemos hacer cambiando la imagen de fondo:

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lo implementamos creando un elemento HTML y escribiendo el código necesario. Esquemáticamente:
<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',this);">ENLACE</div>
<div id="contenedorExterno" class="elementoOculto">
<div>.... el contenido interno ...</div>
</div>
Podemos anidar elementos ocultos con facilidad, agregando enlaces y elementos ocultos en los contenidos:
<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',this);">ENLACE 1</div>
<div id="contenedorExterno" class="elementoOculto">

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_1',this);">ENLACE 2</div>
<div id="contenedorInterno_1" class="elementoOculto">
<div>... el contenido 1 ...</div>
</div>

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_2',this);">ENLACE 3</div>
<div id="contenedorInterno_2" class="elementoOculto">
<div>... el contenido 2 ...</div>

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_3',this);">ENLACE 4</div>
<div id="contenedorInterno_3" class="elementoOculto">
<div>... el contenido 3 ...</div>

</div>
</div>

</div>
MOSTRAR/OCULTAR

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MOSTRAR/OCULTAR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

15 comentarios:

Baba Aruj  

Hola JMiur
¡Eres un fenómeno!Me resulta muy útil tu blog y recurro a él a menudo. A pesar de no tener ni idea de html y demás, ayuda a hacer cosillas más o menos aparentes. Si quieres ver el resultado pasa por filabarbanegra. blogspot.

Responder
Anónimo  

Me gusta mucho
Tratare de aplicarlo en un menu
para las sub-opciones
Espero se pueda agregar cualquier etiqueta, en el bloque oculto-por-mostrar.
Solo que ultimamente estoy un poko flojo.

Responder
Anónimo  

Sr Jmiur
Veo que tien un menu con efecto acordeon.
Las opciones se mueven en forma horizontal hacia delante y vuelven a su posicion normal, cuando el puntero sale de ellas.

Intente hacerlo, por mis propios medios, y casi se me corre la teja.

Le agradeceria mucho, si me ayuda como puedo aplicar este efecto en mis menus, y si ya lo publico, donde lo puedo ver.

Muchas gracias.

Responder
JMiur  

Baba Aruj:
Tu blog se ve perfecto :)

Juan Carlos:
No veo a cual menú te refieres, pero, de cualquier manera, estoy en el proceso de explicar cada uno de los efectos de la sidebar para cumplir con los pedidos que me han hecho.

Responder
Ignasi  

Hola JMiur!

Interesante post, hace un tiempo que estoy investigando como hacer un efecto mas o menos como este (tener un link oculto dentro de otro)

A mi me interesa saber si es posible poner, por ejemplo, en una lista de etiquetas (las de los post) dentro de una categoria.

Tengo un blog de un amigo mio que esta escribiendo un blog de Finanzas y bolsa, y claro, para poner una etiqueta a cada post donde comenta la acción. Así para tenerlas bien recojidas y ordenadas por primera letra o el orden que quiera.... Eso es posible?

Siempre tocando la moral yo :D Gracias!!

Responder
JMiur  

En principio, podría colocarse en cualquier parte ya que simplemente permuta el estado de un bloque y el contenido de ese bloque puede ser cualquier cosa.

Pero, necesitaría más detalles para contestar. Aún no termino de visualizar qué es lo que quieres hacer.

Responder
Anónimo  

Muchas gracias por tu ayuda :)

Lo implementare inmediatamente.

Saludos :)

Responder
JMiur  

No es nada. Espero que te sea útil.

Responder
Shark_Bloody  

che, como hago para sacar el espacio que queda entre elemento y elemento del sidebar, por ejemplo en mi blog(beta)http://matacerebro.blogspot.com
queda un re espacio entre elemento y elemento.

Responder
Shark_Bloody  

ya lo solucione, hay que buscar esto:

.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}


y borrar esto:

margin:0 0 1.5em;
padding:0 0 1.5em;

por si a alguien le interesa, ha para esto de ocultar elementos me sirvio mas el scrip de los desplasamientos suaves.

Responder
merycote  

Sharck_Bloody...me sirvio mucho eso del espaciado...
thank!!!

Responder
loslagartosblog  

En IE no funciona, lo queria para una web que la visitan con Firefox y tambien con IE, pero en este ultimo no funciona.

Responder
JMiur  

Funciona perfectamente en cualquier navegador.

Responder
JMiur  

En ese blog, sólo hay una sidebar en uso; la otra no tiene gadgets. Para modificar el diseño de cada gadget o widget, debes buscar estas reglas en el CSS:

.sidebar .widget, .main .widget { ... }
.sidebar .widget { ... }

con cuidado porque también afecta a las entradas así que conviene separar la primera en dos:

.main .widget { ... }
.sidebar .widget { ... }

¿Qué cambiar? Básicamente quitarles el borde y el color de fondo.

Si quieres subir la sidebar, colócale un margen negativo:

#sidebar-wrapper { margin-top: -10px; }

Responder
JMiur  

No entiendo que quieres decir con "unirla". Sólo hay una, la otra no la estás usando así ique puedes borrarla.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR