Vediamo oggi, con un semplice esempio, come mostrare o nascondere un DIV in una pagina HTML.

Creiamo un DIV e chiamiamolo “content” digitando poi un testo al suo interno:

<div id=”content”>
Questo è il div da mostrare o nascondere
</div>

All’interno della pagina HTML posizioniamo due pulsanti che, rispettivamente, mostreranno o nasconderanno il DIV richiamando un’opportuna funzione JavaScript:

<input type=”button” value=”Mostra” onclick=”javascript:mostra()” />
<input type=”button” value=”Nascondi” onclick=”javascript:nascondi()” />

Le due funzioni JavaScript (mostra / nascondi), agendo sulla proprietà display del DIV, ci permetteranno di mostrare il div (block) o di nasconderlo (none).

Ecco le funzioni JavaScript che fanno uso del DOM (getElementById) per manipolare il DIV:

function mostra() {
document.getElementById(“content”).style.display=”block”;
}

function nascondi() {
document.getElementById(“content”).style.display=”none”;
}

Scarica il file di esempio

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Mostra-nascondi-div (634B)
added: 22/10/2008
clicks: 9079
description: File di esempio su come mostrare o nascondere un div in una pagina HTML.

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.