mostrar/ocultar capas.

[DragonX]

Hola amigos, como les va?.

Les cuento, estoy armando un site y tuve la 'brillante idea' de propoerle al cliente un "efecto" en los textos....(ahora les explico bien)

Tengo 10 títtulos y sus respectivas explicaciones (apróximadamente 15 líneas de texto cada una) y lo que quiero hacer es que aparezcan los diez títulos y al hacer click en ellos se muestre una capa oculta, bajando a los títulos inferiores. ¿me explico?

Esto lo conseguí, y anda perfectamente, pero para un solo título, cuando quiero utilizrlo en otro, ahí se me descontrola todo, y me abre el de arriba y me cierra el de abajo

Este es el código JS:

Código HTML:

OCULTO="none";
VISIBLE="block";
function mostrar(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off').style.display=VISIBLE;
  document.getElementById('ver_on').style.display=OCULTO;
}
 
function ocultar(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off').style.display=OCULTO;
  document.getElementById('ver_on').style.display=VISIBLE;
}

y este es el HTML:

Código HTML:

<div id="ver_on1"><a href="#" onclick="mostrar('bloque1')"><h1>(+)Operaciones Compra-Venta y Alquileres</h1></a></div>
    <div id="ver_off1" style="display: none"><a href="#" onclick="ocultar('bloque1')"><h1>(-)Operaciones Compra-Venta y Alquileres</h1></a></div>
    <div id="bloque1" style="display: none">
      <p>En la autorización de venta o alquiler, se estipulan plazos y condiciones. Desde allí en adelante nuestro trabajo consiste en ofrecer la unidad a potenciales interesados, y además efectuando publicaciones destacadas.</p>
    </div> 

Verán que si prueban este script anda perfectamente, pero como bien dije antes, lo que necesito es que pueda reutilizarlo en N cantidad de títulos.

Agradezco cualquier ayuda.

DX

[DragonX]

corrijo, el JS es este...

//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
function mostrar(blo) {
document.getElementById(blo).style.display=VISIBLE ;
document.getElementById('ver_off').style.display=V ISIBLE;
document.getElementById('ver_on').style.display=OC ULTO;
}

function ocultar(blo) {
document.getElementById(blo).style.display=OCULTO;
document.getElementById('ver_off').style.display=O CULTO;
document.getElementById('ver_on').style.display=VI SIBLE;
}

Por otro lado, TUNAIT ví el que tenes en tu página, ESTE anda perfectamente, pero como hago para que por default la info aparezca apagada, osea la lista cerrada

Gracias!!!!

[caricatos]

Hola:

Aunque no he llegado a enterarme del problema, te cuento como lo plantearía:

Si lo que quieres mostrar y ocultar una capa debes usar el estilo display: [block|none]... por lo que veo tienes que tener al principio todos "none", y si quieres que se oculte el último mostrado al querer mostrar otro, bastaría guardar el último mostrado:

function tag(id) {
return document.getElementById(id);
}
var mostrado = "bloque1";
function mostrar(capa) {
tag(mostrado).style.display = "none";
mostrado = capa;
tag(mostrado).style.display = "block";
}

Lo que no entiendo es la razón de tantas capas... , pero si todas tienen el mismo formato: "bloqueX" puedes rescatar esa "X" con X = capa.substring(5) (creo)... y luego podrías formar las cadenas concat("ver_on", X)...

Saludos

[tunait]

Iniciado por DragonX

Por otro lado, TUNAIT ví el que tenes en tu página, ESTE anda perfectamente, pero como hago para que por default la info aparezca apagada, osea la lista cerrada

Muy buenas Don Dragon

mmm... al final del tutorial se indica una función que hace eso. Fíjate en la función ocultaItems(). Se encarga de ocultar la información que podrá ser desplegada