Press "Enter" to skip to content

JavaScript, ecco come mostrare o nascondere un DIV

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):

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

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

Condividi l'articolo con i tuoi amici
  1. 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. Giusta osservazione!

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

    Grazie per la tua puntuale osservazione 😉

  3. pippo pippo

    Come è possibile disabilitare al caricamento della pagina un div? Quale funzione inserire?

  4. @pippo per “nascondere” un div al caricamento della pagina puoi utilizzare la funzione nascondi() in questo modo:

    window.onload = function() {
    nascondi();
    }

    Essendo un fan di jQuery ti consiglio, comunque, di utilizzare le funzioni ready e hide del noto framework js per il tuo scopo 😉

    Esempio:

    $(document).ready(function() {
    $(‘#tuo_div’).hide();
    });

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *