JavaScript, ecco come mostrare o nascondere un DIV

Pubblicato il 22/10/2008 alle 19:59

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

download: Mostra-nascondi-div (634B) added: 22/10/2008 clicks: 848 description: File di esempio su come mostrare o nascondere un div in una pagina HTML.

Altri articoli che potrebbero interessarti

• Google indicizza i siti in Flash
• Trova e sostituisci in Flash
• Moo.rd un eccellente libreria JavaScript
• Flash – colorare testi e MovieClip dinamicamente
• Inviare E-mail da PHP

2 Responses to “JavaScript, ecco come mostrare o nascondere un DIV”

1. Giovambattista Fazioli Says:
   Ottobre 22nd, 2008 at 21:26

   Per semplicità basterebbe usare una sola funzione mostra(), se usi:
   
// @param v true visibile, false invisibile
function mostra(v) {
document.getElementById(”content”).style.display=v?”block”:none;
}


2. EmaWebDesign Says:
   Ottobre 22nd, 2008 at 22:54

   Giusta osservazione!

   Se non sbaglio i doppi apici vanno anche sul parametro “none”.

   Grazie per la tua puntuale osservazione

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Segnalami via email se ci sono nuovi commenti

EmaWebDesign :: Web Programming / Web Design / SEO utilizza WordPress con tema EWD 2.0 :: Articoli (RSS) e Commenti (RSS)



Questo blog (e tutti i suoi contenuti) è pubblicato sotto una Licenza Creative Commons. Leggi il disclaimer per tutte le info.

L'autore del blog è Emanuele Calì, web developer, web designer e SEO specialist. Per maggiori info sull'autore potete visualizzare la pagina about. Per informazioni su servizi inerenti siti web, grafica o SEO & Web Marketing potete visualizzare la pagina servizi.