Mostrare e nascondere un div mediante un pulsante

Codice HTML:

---

<input type=button value="+" name="var_1" OnClick=mostra(name)>
<div id="var_1" class="variabile">Buon giorno </div>

---

Il pulsante richiama la funzione mostra in codice javascript

Codice:

---

<script language="javascript">
        function mostra(name)
        {       
                document.getElementById(name).style.display="block";
        }
</script>

---

Il problema ora sta nel nascondere il contenuto quando il bottone viene ricliccato; ho provato facendo:

Codice:

---

<script language="javascript">
        var ausiliaria=false;
        function mostra(name)
        {       
                if(ausiliaria==false)
                {
                      document.getElementById(name).style.display="block";
                      ausiliaria=true;
                  }
                else
                {
                      document.getElementById(name).style.display="none";
                      ausiliaria=false;
                }
</script>

---

In questo modo però definire la variabile ausiliaria fuori dalla funzione è inutile. Come potrei fare? Ho cercato funzioni javascript che permettessero di ricavare il value di display (css) in modo tale da fare un controllo, ma non ho trovato alcuna soluzione.

Codice:

---

<script language="javascript">
        function mostra(name)
        {       
                if(document.getElementById(name).style.display == "block"){
                        document.getElementById(name).style.display = "none";
                }else{
                        document.getElementById(name).style.display = "block"
                }
        }
</script>

---

In questo modo se l'oggetto è visibile, lo nascondi, mentre se è già nascosto, lo rendi visibile.

Vorrei cambiare il value del bottone al click. Ho provato in questo modo ma non funziona:

Codice:

---

        function mostra(name)
        {       
                if(document.getElementById(name).style.display == "block")
                {
                        document.getElementById(name).style.display="none";
                        document.getElementById(name).value="-";
                }
                else
                {
                        document.getElementById(name).style.display="block";
                        document.getElementById(name).value="+";
                }
        }

---

Dove è l'errore?

Perché "name" è l'id del div, non del pulsante. Dovresti passare anche l'id del pulsante, oppure fare una cosa del genere:

Codice:

---

<input type=button value="+" name="var_1" OnClick="mostra('var_1'); this.value=(this.value=='+')?'-':'+'">

---

Ciao!

ti riusciva molto più semplice se usavi toggle

potevi fare in questo modo usando jquery:

$(document).ready( function(){
$("#var_1").hide();

$("#mettiunidalbutton").click( function(){
$("#var_1").toggle("slow");});
});

e il gioco è fatto :)

Includere 100kb di sorgente per nascondere un div? :mrgreen:.

Ciao!

la semplicità la semplicità haha :)

Grazie mille, ho utilizzato la prima modalità.