Elementos expandibles

[mdrgz]

Bueno, vengo de la seccion Foros del Web > Diseño de Sitios web > Web general, buscando un script para hacer que un elemento de HTML en blog solo muestre la primer imagen que es un boton el cual al hacer click sobre el, se expandan varias imagenes abajo que contienen links a diferentes sitios web amigos.

Les cuento lo que hice:

1 - Esto pegado justo antes de </head>

<script type='text/javascript'>
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility==&quot;hi dden&quot; ?&quot;visible&quot;:&quot;hidden&quot;);
}
</script>

2 - Esto dentro del elemento HTML donde ya estaban todas las imagenes, pego esto

<a href="javascript:ver_div('SITIOSQUERECOMIENDO')><i mg border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

<div id="SITIOSQUERECOMIENDO" style="VISIBILITY: hidden">

<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img border="0" alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/AGENDAROCKERA.gif"/></a>
<a href="http://malinamaniac.blogspot.com/" target="_blank"><img border="0" alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/MALINAMANIAC.gif"/></a>

</div>

3 - Una vez guardados los cambios, veo en mi blog solo la primer imagen que seria la que tiene el link para ejecutar las funciones mostrar-ocultar (justamente asi tiene que ser), pero cuando le doy click a esa imagen, no se muestra nada.
Ademas en mi navegador (IE7) me da "Listo pero con errores en la pagina"

Ya no se que puede ser, o sea, no se me ocurre cual es el error.

Por si sirve de guia, dejo la ubicacion del primer post para que vean como fue la evolucion del tema.


http://www.forosdelweb.com/f91/elemento-html-expandible-para-blog-629181/


Muchisimas gracias!!!

[mdrgz]

Alguien sabe donde esta el error?

Gracias!

[David]

Prueba a cambiar la línea que está en ver_div por esta:

Código javascript:

document.getElementById(id).style.visibility=(document.getElementById(id).style.visibility=='hidden') ? 'visible':'hidden';
 

[mdrgz]

Gracias David!!!

Te comento que finalmente pude hacer funcionar ese script.

No quiero abusar, pero te hago otra pregunta con respecto a eso:

Cambian mucho los scripts para mostrar esto con una barra lateral ya que el mismo esta aplicado a dos elementos en el blog, pero en uno de ellos son cerca de 400 gif de 250 x 20 Px y esto hace que el box sea demasiado grande, y se produce un efecto de vacio entre el titulo del primer y segundo elemento, me explico?

Saludos y nuevamente te agradezco mucho por la solucion!

[David]

La verdad es que no entendí, para que sea en vertical lo único que habría que cambiar es el estilo de los <img> (diplay:block).

[mdrgz]

Ok, voy a intentar explicarte mas claramente.

Basicamente el motivo por el cual queria hacer esto de ocultar y mostrar el contenido de un elemento, era para ahorrar espacio en la pagina principal del blog.

Imaginate que antes de lograr este efecto de ocultar y con un click sobre una imagen determinada, tener la posibilidad de expandir todo ese contenido, tenia una columna con casi 400 imagenes y esto hacia que el blog sea muy largo (incomodo para navegar)

Ahora las imagenes estan ocultas, pero aun sigo sin ahorrar espacio ni tampoco puedo poner nada abajo de ese elemento porque me queda algo asi:

BOTON 1









































BOTON 2

entonces estamos en la misma que antes.

Lo que quiero lograr es que quede algo asi:

BOTON 1

BOTON 2

y al hacer click sobre el BOTON 1 se muestre todo el contenido en forma de caja (con una barra deslizadora a la derecha), o mejor aun, que el BOTON 2 baje automaticamente haciendo lugar al contenido del BOTON 1

Bueno, espero que hayas entendido lo que estoy tratando de hacer, jejeje y lo peor de todo es que no se como hacerlo, jejeje.

Perdon si soy medio HINCHA PE.....TAS

EL BLOG ES - MDRGZ.BLOGSPOT - POR SI LE QUERES DAR UN VISTAZO

[David]

Entonces en lugar de visibility usa display: "none" para ocultar y "block" para mostrar.

[mdrgz]

David, como te habras dado cuenta, no conozco mucho sobre estos temas.

Yo dejo un ejemplo de lo que tengo actualmente y seria bueno que me indiques que es lo que tengo que cambiar por:

Iniciado por David el Grande

Entonces en lugar de visibility usa display: "none" para ocultar y "block" para mostrar.

Gracias!!!

ESTO EN LA PLANTILLA ANTES DE </HEAD>


<script type='text/javascript'>
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility=='hidden' ) ? 'visible':'hidden';
}
</script>


ESTO DENTRO DEL ELEMENTO AL QUE QUIERO HACER EL EFECTO


<a href="javascript:ver_div('ENTRADAS')><img border="0" src="http://mi-servidor-de-imagenes/boton1.gif"/></a>

<div id="TODOSLOSDISCOS" style="VISIBILITY: hidden">

<a href="http://mi-web.com/search/label/Entradas%20Nuevas"><img border="0" alt="" src="http://mi-servidor-de-imagenes/boton2.gif"/></a>
<a href="http://mi-web.com/search/label/Entradas%20Antiguas"><img border="0" alt="" src="http://mi-servidor-de-imagenes/boton3.gif"/></a>

</div>

[David]

Sería bueno que tú lo intentaras primero y después si no te sale vuelvas a preguntar .

Véase: Guía para hacer preguntas en el Foro. Apartado: Si no entiendes la respuesta.

[mdrgz]

Gracias por la "semi-ayuda", David el Grande

Finalmente seguí tu consejo y busqué info en otra web (vagabundia.blogspot.com/2008/01/sidebar-explicada.html) y logré crear el efecto que quería pero con otro script.

Dejo un resumen de la explicación por si alguien está buscando ayuda con este tema:

...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.


ESTO ANTES DE </HEAD>

<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 == 'elementoVisible') {
elElemento.className = 'elementoOculto';
desde.className = 'linkContraido';
} else {
elElemento.className = 'elementoVisible';
desde.className = 'linkExpandido';
}
}</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

Lo implementamos creando un elemento HTML y escribiendo el código necesario. Esquemáticamente:

ESTO DENTRO DEL ELEMENTO HTML QUE CONTIENE LOS OBJETOS A LOS QUE QUEREMOS APLICAR EL EFECTO

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE</div>
<div id="contenedorExterno" class="elementoOculto">
<div>.... el contenido interno ...</div>
</div>

ADEMÁS PODEMOS IR UN PASO MÁS ALLÁ...

Podemos anidar elementos ocultos con facilidad, agregando enlaces y elementos ocultos en los contenidos:

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE 1</div>
<div id="contenedorExterno" class="elementoOculto">

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

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

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

</div>
</div>

</div>