[SOLUCIONADO] Mostrar varios DIV con el mismo nombre al pulsar enlace

[angel_dope]

Hola a tod@s, tengo el siguiente problema: tengo una página con una lista enorme de opciones para marcar, por lo que quería ocultar una parte de estas opciones (van anidadas) y que se muestren solo al pulsar el enlace de la categoría padre. La página se va creando de forma dinámica mediante asp. El problema es que de esta forma, cuando se va creando, en lugar de crear un unico DIV que contenga todas las subcategorías, se crea un DIV para cada una de ellas, y todas con el mismo nombre. Al pulsar el enlace para que me las muestre, solo saca la primera, y las demás siguen desaparecidas. ¿Hay alguna forma de hacer que las muestre todas, a pesar de ser varias con el mismo nombre? También me serviría modificar la funcion para que mostrase varios DIV con diferente nombre, aunque no tengo muy claro como montar eso. Os dejo el código de lo que tengo de momento,a ver si alguien me puede echar una mano.

La función que muestra u oculta al pulsar:

Código Javascript:

<script type="text/javascript">
function show(bloq) {
  obj = document.getElementById(bloq);
  obj.style.display = (obj.style.display=='none') ? 'block' : 'none';
}
</script>
 

El código con los diferentes niveles y DIV de las opciones

Código HTML:

<input type="checkbox" name="sector" value="111">
            <a href="#" onClick="show('oculto1')">MOBILIARIO PARA EL HOGAR</a><br>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1110">
            MUEBLE  CLASICO<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1111">
            MUEBLE MODERNO<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1112">
            MUEBLE RUSTICO<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1113">
            MUEBLE TAPIZADO<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1114">
            MUEBLE DISEÑO / VANGUARDIA<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1115">
            MUEBLES DE TERRAZA Y JARDIN<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1116">
            MOBILIARIO INFANTIL<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1117">
            MOBILIARIO DE BAÑO<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1118">
            MOBILIARIO DE COCINA<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1119">
            OTRO MOBILIARIO PARA EL HOGAR<br></div>
         
            <div id="oculto1" style="display:none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="sector" value="1121">
            MONTADORES INSTALACIONES<br></div>
 

[angel_dope]

A nadie se le ocurre??

[Tusade]

Pero a ver, según recuerdo de los estándares de W3C, el id debe ser único en toda la página. Por esa razón no se puede tratar el atributo "id" como si fuera un "class", porque para eso está el "class"

Yo creo que el problema lo tienes en:

El problema es que de esta forma, cuando se va creando, en lugar de crear un unico DIV que contenga todas las subcategorías, se crea un DIV para cada una de ellas, y todas con el mismo nombre.

¿No puedes crear un "class" con el mismo nombre en vez de con un "id"?

[angel_dope]

Iniciado por Tusade

Pero a ver, según recuerdo de los estándares de W3C, el id debe ser único en toda la página. Por esa razón no se puede tratar el atributo "id" como si fuera un "class", porque para eso está el "class"

Yo creo que el problema lo tienes en:



¿No puedes crear un "class" con el mismo nombre en vez de con un "id"?

¿Me puedes poner algún ejemplo? No estoy demasiado familiarizado con javascript y mucho menos con esto del "class"

[Tusade]

Me explico: tienes que sustituir el id="oculto1" por class="oculto1" en los atributos de todos las cajas div.

Tú tienes el siguiente código que muestra una caja oculta repetida varias veces:

Código HTML:

<a href="#" onClick="show('oculto1')">MOBILIARIO PARA EL HOGAR</a><br>
<div id="oculto1" style="display:none;">Esto es una caja oculta</div>
<div id="oculto1" style="display:none;">Esto es otra caja oculta</div>
<div id="oculto1" style="display:none;">Esto es una tercera caja oculta</div>
 

Pues yo le cambiaría el atributo del div:

Código HTML:

<div class="oculto1" style="display:none;">Esto es una caja oculta</div>
<div class="oculto1" style="display:none;">Esto es otra caja oculta</div>
<div class="oculto1" style="display:none;">Esto es una tercera caja oculta</div>
 

Luego, nos vamos a Javascript y escribimos un bucle "for":

Código Javascript:

function show(bloq) {
      var obj = document.getElementsByClassName(bloq); /* Esto nos recoge un array de todos los
      elementos cuyo atributo class sea el contenido de la variable "bloq" */
      for (var i = 0; i<obj.length; ++i) { /* Bucle for, le estamos diciendo que se ejecute según tantas
      veces encuentre un elemento con atributo class="oculto1" */
              obj[i].style.display = (obj[i].style.display=='none') ? 'block' : 'none'; /* No olvidemos poner
               un [i] para identificar el elemento de un array. */
      }
}
 

Eso es lo que yo haría

EDIT: Ah, y te ha faltado declarar la variable "obj" en javascript (ponerle un "var" delante de obj), según veo.

[Alexis88]

Iniciado por Tusade

te ha faltado declarar la variable "obj" en javascript (ponerle un "var" delante de obj), según veo.

Si no pretende que el ámbito de la variable se restrinja al de la función, entonces, no es necesario, aunque —como se aconseja en la documentación existente— es lo recomendable.

Saludos

[angel_dope]

Iniciado por Tusade

Me explico: tienes que sustituir el id="oculto1" por class="oculto1" en los atributos de todos las cajas div.

Tú tienes el siguiente código que muestra una caja oculta repetida varias veces:

Código HTML:

<a href="#" onClick="show('oculto1')">MOBILIARIO PARA EL HOGAR</a><br>
<div id="oculto1" style="display:none;">Esto es una caja oculta</div>
<div id="oculto1" style="display:none;">Esto es otra caja oculta</div>
<div id="oculto1" style="display:none;">Esto es una tercera caja oculta</div>
 

Pues yo le cambiaría el atributo del div:

Código HTML:

<div class="oculto1" style="display:none;">Esto es una caja oculta</div>
<div class="oculto1" style="display:none;">Esto es otra caja oculta</div>
<div class="oculto1" style="display:none;">Esto es una tercera caja oculta</div>
 

Luego, nos vamos a Javascript y escribimos un bucle "for":

Código Javascript:

function show(bloq) {
      var obj = document.getElementsByClassName(bloq); /* Esto nos recoge un array de todos los
      elementos cuyo atributo class sea el contenido de la variable "bloq" */
      for (var i = 0; i<obj.length; ++i) { /* Bucle for, le estamos diciendo que se ejecute según tantas
      veces encuentre un elemento con atributo class="oculto1" */
              obj[i].style.display = (obj[i].style.display=='none') ? 'block' : 'none'; /* No olvidemos poner
               un [i] para identificar el elemento de un array. */
      }
}
 

Eso es lo que yo haría

EDIT: Ah, y te ha faltado declarar la variable "obj" en javascript (ponerle un "var" delante de obj), según veo.

Probado... y funcionando a la perfección, muchísimas gracias !!!! Ahora solo me falta hacer lo mismo con los diferentes niveles de anidamiento, pero es cuestión de darle un par de vueltas. Muchas gracias de nuevo.