mostrare/nascondere elementi

Salve a tutti, chi mi sa dire come fare per nascondere o visualizzare elementi "nascosti" in una pagina?

Esempio: Nella mia pagina c'è una scritta, COMMENTI, cliccando sopra questa scritta, questa a sua volta visualizza altre scritte sotto di essa che in precedenza non si vedevano ma che vengono "attivate" solamente quando l'utente clicca sopra la scritta COMMENTI. Funziona anche al contrario, cioè ricliccandoci sopra le scritte vengono nuovamente "nascoste".
Spero di essermi spiegato...grazie a chiunque mi risponderà!

Ecco lo script:

Codice HTML:

---

<script type="text/javascript">
var visibile=false;
function MostraNascondi() {
        if (visibile)
                document.getElementById("commenti").display="none";
        else
                document.getElementById("commenti").display="";
        visibile=!visibile;
}
</script>

---

Ecco il link:

Codice HTML:

---

<a href="javascript:MostraNascondi();">Mostra/nascondi commenti</a>

---

Ecco il testo da mostrare e da nascondere:

Codice HTML:

---

<div id="commenti">Testo</div>

---

Non mi va.....ho mozilla...dovrebbe funzionare lo stesso vero?

Invece di fare un href si potrebbe mettere un onclick?

C'è un problema fun, se una persona ha gli javascript disabilitati quel codice va a farsi benedire :(
se nn erro ne avevo trovato tempo fa uno completamente in css, nn ti assicuro nulla, ma se lo trovo te lo posto!!

Citazione:

---

Originalmente inviato da drako1989

C'è un problema fun, se una persona ha gli javascript disabilitati quel codice va a farsi benedire :(
se nn erro ne avevo trovato tempo fa uno completamente in css, nn ti assicuro nulla, ma se lo trovo te lo posto!!

---

Se lo trovi mi faresti un enorme piacere...grazie! ;)

Modifica lo script così (ho dimenticato una cosa):

Codice HTML:

---

<script type="text/javascript">
var visibile=false;
function MostraNascondi() {
        if (visibile)
                document.getElementById("commenti").style.display="none";
        else
                document.getElementById("commenti").style.display="";
        visibile=!visibile;
}
</script>

---

Funziona però la prima volta la scritta 'testo' gia viene visualizzata...come mai? Forse è sbagliata la var boolean.

Modifica così:

Codice HTML:

---

<div id="commenti" style="display:none;">Testo</div>

---

se nn erro il sito era questo:
http://www.mollaecollalayout.mondoqu...olla/Nina.html
ricordo di averlo letto tempo fa perchè mi interessava fare un menù a tendina con soli css (senza utilizzo di javascript che odio nn poco) e c'era scritto che il procedimento era quello di nascondere appunto il div del menù.
prova a controllare se fa al caso tuo!!!

Ok...ora funziona....senti ma per non fare un href ma solo un testo normale come posso fare? Grazie.

Potresti fare così:

Codice HTML:

---

<a onclick="MostraNascondi();">Mostra/nascondi commenti</a>

---

Però credo che il parametro href sia obbligatorio.

Codice HTML:

---

<a href="#" onclick="MostraNascondi();">Mostra/nascondi commenti</a>

---

Si, poi cmq basta modifica il css perchè non mi piaceva il colore....

Un'ultima cosa, spero, a me servirebbe che cliccando su 'Mostra/nascondi commenti' mi visualizzi non solo un commento...ma anche 2, 3, 4 ecc....come devo fare?

Ho provato a fare così ma mi prende solo il primo:
<a href="javascript:MostraNascondi();">Acquisto accessori</a>
<div id="commenti" style="display:none;">Ordine di acquisto accessori</div>
<div id="commenti" style="display:none;">Risposta di acquisto accessori</div>
<div id="commenti" style="display:none;">Modifica di acquisto accessori</div>
<a href="javascript:MostraNascondi();">Spedizione Accessori</a>
<div id="commenti" style="display:none;">Testo</div>

Devi mettere tutto dentro il div.

Citazione:

---

Originalmente inviato da funcool

Potresti fare così:

Codice HTML:

---

<a onclick="MostraNascondi();">Mostra/nascondi commenti</a>

---

Però credo che il parametro href sia obbligatorio.

Codice HTML:

---

<a href="#" onclick="MostraNascondi();">Mostra/nascondi commenti</a>

---

---

Un'unica cosa.
quando si ha un <a> con href="#" e onclick="funzione()"
accade uno spiacevole effetto di scrolling in cima alla pagina.
Accade perché oltre l'onclick (eseguito prima in sequenza) poi si passa ad eseguire comunque il comando href che indica di scrollare fino ad un anchor name "senzanome" ovvero # e niente dopo.
Può essere evitato facendo ritornare un false all'onclick in modo tale da annullare l'evento di click sul link.
Quindi farei:

Codice HTML:

---

<a href="#" onclick="MostraNascondi(); return false;">Mostra/nascondi commenti</a>

---

In alternativa si può far ritornare false alla fine della function MostraNascondi() e poi fare solo:
onclick="return MostraNascondi();"
ma è una finezza va bene anche il primo metodo (ad ogni modo preferisco il secondo metodo, personalmente).