Problema nel visualizzare/nascondere DIV con display:none/block

**MrsCassandra** · 15-05-2010, 00:55

Ciao,

ho fatto un po' di ricerche in giro, ma non ho trovato niente che risolvesse il mio dilemma...

Ho un div in posizione fissa che vorrei poter visualizzare solo quando clicco sul pulsante x nella mia pagina.

Se il div in questione parte visibile non ho alcun problema, riesco a nascondere e visualizzare il div infinite volte, con i principali browser (provato con Opera, Safari, Firefox, IE e Chrome).

Esempio:

codice:

<form><input type="button" name="visualizzalo" onclik="javascript:document.getElementById('ilmiodiv').style.display='block';" value="Visualizza il Div" /></form>

<div id="ilmiodiv">
    <input class="box" type="button" onclick="javascript:document.getElementById('ilmiodiv').style.display='none';" value="Remove" />
    TESTO TESTO
</div>

Quello che vorrei ottenere è di "non visualizzare" il div (ilmiodiv) all'inizio, ma solo quando l'utente clicca sul bottone (visualizzalo).

Se inserisco nel foglio di stile inserisco "display:none;" a #ilmiodiv il div resta non visibile per quante volte possa cliccare sul pulsante. Ho anche provato con "display:hidden;" ma il risultato è lo stesso e non è un problema di browser.

Dove sbaglio? :master:

Grazie per ogni aiuto!!

**codencode** · 15-05-2010, 09:55

Dal momento che usi JavaScript (con gli eventuali problemi che possono esserci in sua assenza) puoi associare al div display:none all'evento onload della pagina e poi renderlo visibile al clic sul pulsante come già hai fatto. In pratica, entrando nella pagina JavaScript rende invisibile il div e la pressione sul pulsante lo mostra.

**FraXD** · 15-05-2010, 09:57

Ecco che subentra il Js... Posso farti un esempio (Anche se ho paura di sbagliare :P)

CSS:

codice:

#div { display: none; }

HTML:

codice:

<html>
<head>
<style>
#div {
display: none;
}
</style>
<script language="javascript">
	function display_block() {
		document.getElementById('div').style.display = "block";
	}
	function hide_block() {
		document.getElementById('div').style.display = "none";
	}
</script>
</head>
<body>
<div id="div">TESTO</div>
MOSTRA DIV
...
</body>
</html>

EDIT: Codice testato e modificato

**MrsCassandra** · 15-05-2010, 11:49

Ciao e grazie per le risposte!!

Alla fine stavo facendo tutto giusto salvo che avevo fatto un banale errore ortografico (che non vedevo bene perché in Dreamweaver il termine appariva in giallo su bianco, una bellezza!!)...

Ma grazie alle vostre risposte ho rivisto il codice e trovato la soluzione migliore per le mie esigenze!!

Grazie mille ancora!!!

**FraXD** · 15-05-2010, 11:50

Di niente, buona fortuna per il tuo lavoro... A risentirci

Discussione: Problema nel visualizzare/nascondere DIV con display:none/block

Strumenti discussione

Ricerca discussione

Visualizza

Problema nel visualizzare/nascondere DIV con display:none/block

Permessi di invio