mostra-nascondi con più div

**testamobile** · 15-12-2010, 17:16

ciao a tutti, ho nel mio sito più div con lo stesso nome, esempio:

codice:

<div id="elimina"></div>
<div id="condividi"></div>
<div id="elimina"></div>
<div id="elimina"></div>
<div id="condividi"></div>

vorrei realizzare due link:
- uno che quando lo clicco mostri gli "elimina" e nasconda i "condividi"
- uno che quando lo clicco mostri i "condividi" e nasconda gli "elimina"

qualcuno mi sa aiutare?!
grazie in anticipo

**NonCeLaFaccio+** · 15-12-2010, 17:47

Ciao,
una regola dell'html è che l'id deve essere univoco, altrimenti rischi che qualche browser non interpreti correttamente la pagina e inoltre non ti verrà mai validata dal W3C.

Una cosa che puoi fare è di creare un array con tutti gli oggetti tag aventi un certo nome utilizzando la document.getElementsByTagName e poi esaminare con un ciclo questo array e impostare la proprietà display di ciascuno al valore "none" oppure "block".

**testamobile** · 15-12-2010, 18:23

grazie mille, ma non sono molto pratico di javascript...
puoi linkarmi uno script che mi possa tornar utile?

grazie mille

**NonCeLaFaccio+** · 15-12-2010, 18:53

Prova questo:

codice:

<html>
<head>
<style>
   .nascosto {display:none;}
   .visibile {display:block;}
</style>

<script type="text/javascript">
   function mostra_elimina() {
      arr = document.getElementsByTagName('div');
      for(i=0; i<arr.length; i++){
         if(arr[i].name=='elimina'){
            arr[i].className = "visibile";
         }
         if(arr[i].name=='condividi'){
            arr[i].className = "nascosto";
         }
      }
   }

   function mostra_condividi() {
      arr = document.getElementsByTagName('div');
      for(i=0; i<arr.length; i++){
         if(arr[i].name=='elimina'){
            arr[i].className = "nascosto";
         }
         if(arr[i].name=='condividi'){
            arr[i].className = "visibile";
         }
      }
   }

   function mostra_tutto() {
      arr = document.getElementsByTagName('div');
      for(i=0; i<arr.length; i++){
         if(arr[i].name=='elimina' || arr[i].name=='condividi'){
            arr[i].className = "visibile";
         }
      }
   }

   function nascondi_tutto() {
      arr = document.getElementsByTagName('div');
      for(i=0; i<arr.length; i++){
         if(arr[i].name=='elimina' || arr[i].name=='condividi'){
            arr[i].className = "nascosto";
         }
      }
   }

</script>
</head>

<body>

<div name="elimina" class="nascosto">questo è dentro elimina</div>
<div name="condividi" class="visibile">questo è dentro condividi</div>
<div name="elimina" class="nascosto">questo è dentro elimina</div>
<div name="elimina" class="nascosto">questo è dentro elimina</div>
<div name="condividi" class="visibile">questo è dentro condividi</div>

<input type="button" onclick="mostra_elimina()" value="mostra elimina">
<input type="button" onclick="mostra_condividi()" value="mostra condividi">
<input type="button" onclick="mostra_tutto()" value="mostra tutto">
<input type="button" onclick="nascondi_tutto()" value="nascondi tutto">

</body>
</html>

Ciao

**TrueLies** · 15-12-2010, 22:36

Discussione: mostra-nascondi con più div

Strumenti discussione

Ricerca discussione

Visualizza

mostra-nascondi con più div

Permessi di invio