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”;
}
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;
}
Giusta osservazione!
Se non sbaglio i doppi apici vanno anche sul parametro “none”.
Grazie per la tua puntuale osservazione 😉
Come è possibile disabilitare al caricamento della pagina un div? Quale funzione inserire?
@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();
});