show/hide dom: infiniti div?

[Nt3N]

ciao a tutti

ho letto e applicato questo esempio

http://javascript.html.it/articoli/l...-javascript/3/

si tratta di un modo per nascondere e mostrare un div dinamicamente.

per ogni oggetto nascosto inizialmente, si deve impostare la non visibilità nel css.

ora, se io ho un numero mettiamo infinito di div da nascondere e mostrare (per esempio, se ho una faq con 200 domande, le cui risposte compaiono appena clicco), esiste un modo automatico di usare il codice dell'esempio senza dover aggiungere 200 righe nel css per definire l'invisibilità in partenza dei div?

[lake86]

per rendere invisibili tutti i div di una pagina puoi fare cosi

div
{
// Proprieta tutti i div della pagina

}

[Nt3N]

eh ma non posso nascondere tutti i div, visto che il 99% dei div del mio sito devono essere visibili.

cmq ho trovato una soluzione. forse non molto elegante, ma efficace.
in pratica assegno la proprietà di invisibilità all'inizio direttamente dalla pagina html, in modo dinamico tramite php. in questo modo non devo aggiungere 200 linee nel css!

[and80]

potresti associare ad ognuno di questi div un attributo identico, ad esempio se utilizzi name='prova', con uno script del genere "spegni" tutti quei layer all'accesso alla pagina

<script type='text/javascript'>
<!--
    onload = function(){
        var di = document.getElementsByName("prova");
        for(var i = 0; i < di.length; i++){
            di[i].style.visibility = 'hidden';
            di[i].style.display = 'none';
        }
    }

//-->
</script> 

ps. non l'ho provato ma non dovrebbero esserci problemi

pps. utilizzando questo metodo non hai retrocompatibilità con i browser un po' datati e con gli Opera fino al 9 escluso


ppps. dimenticavo, con il metodo che hai preso in considerazione nel tuo ultimo post, hai già verificato cosa succede per chi ha JS disabilitato?

[Vidarr]

Ecco come farei io:
CSS:

div.hidden {
    display: none;
}

JavaScript:

function show_hide(div) {
   if(document.getElementById(div)) {
       p = document.getElementById(div);
      if (p.style.display == 'none')
         p.style.display = 'block';
      else
         p.style.display = 'none';
   }
}

HTML

Domanda 1?
<div id='1' class='hidden'>
Risposta 1
</div>

Se interfacci il tutto con php non è difficile utilizzare un numero progressivo

[Nt3N]

Originariamente inviato da and80
ppps. dimenticavo, con il metodo che hai preso in considerazione nel tuo ultimo post, hai già verificato cosa succede per chi ha JS disabilitato?

onestamente no. ma come faccio a provarlo? come si disabilita javascript su un browser? O__O

[Nt3N]

Originariamente inviato da Vidarr
Se interfacci il tutto con php non è difficile utilizzare un numero progressivo

quello che hai postato tu è sostanzialmente il codice che ho usato io.

solamente che al posto di creare una classe "hidden" ho semplicemente assegnato la proprietà

style="display:none;" 

al DIV che contiene il contenuto da nascondere!

grazie a tutti

[Nt3N]

Originariamente inviato da Nt3N
onestamente no. ma come faccio a provarlo? come si disabilita javascript su un browser? O__O

ho trovato il flag nelle opzioni. disabilitando javascript, in effetti non si visualizza nulla.
del resto è ovvio perchè disabilitando tramite css la visibilità, poi non si riesce a ripristinarla tramite javascript, visto che è disabilitato.

quindi tu consigli di togliere la visibilità da javascript cosi' se uno ce l'ha la toglie e se uno non ce l'ha non la toglie?

[edit] ho provato con il tuo codice.. funziona, ma, non so per quale motivo, non mostra il contenuto che dovrebbe. cioè mostra il div, ma senza nulla dentro.

[and80]

Originariamente inviato da Nt3N

quindi tu consigli di togliere la visibilità da javascript cosi' se uno ce l'ha la toglie e se uno non ce l'ha non la toglie?

esattamente, te l'ho chiesto perchè in effetti il codice che ti ho postato fa in modo di rendere invisibili i div solo se JS è abilitato (non esattamente lo stesso codice, io l'ho basato sul className che era uguale per i miei div da nascondere)

[and80]

Originariamente inviato da Nt3N
[edit] ho provato con il tuo codice.. funziona, ma, non so per quale motivo, non mostra il contenuto che dovrebbe. cioè mostra il div, ma senza nulla dentro.

se posti la funzione di show/hide te la correggo per funzionare con il "mio" metodo