Realizzare elementi a comparsa con un click

In questo tutorial vedremo come rendere visibili degli elementi della nostra pagina web attraverso un link dinamico… Potremmo farlo con Onclick="document.elemento.style.display=’block’" ma siamo eleganti e quindi ci serviremo di una funzione Javascript.

Nell’esempio in questione avremo un DIV #testo visibile e un DIV #immagine non visibile.

Ecco il codice Javacript da inserire tra i TAGs HEAD del nostro sito:

<script type="text/javascript" language="javascript">
function visualizza(id){
  if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
  }
}
</script>

Come si può notare, lo script recupera l’id tramite getElementById e tramite un ciclo IF-ELSE setta l’attributo DISPLAY in maniera diversa. Ecco quindi il codice da inserire tra i TAGs BODY:

<!-- Inizio codice DIV #testo -->
<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">
Clicca qui per visualizzare l'immagine scoop</a></div>
<!-- Fine codice DIV #testo -->
<!-- Inizio codice DIV #immagine -->
<div id="immagine" style="display:none"><img src="immagine.jpg" /></div>
<!-- Fine codice DIV #immagine -->

Da notare di questo codice la riga

onclick="visualizza('immagine'); return false"

che richiama al click del mouse sul link la funzione "visualizza()" per l’ID #immagine, e la riga

style="display:none"

che setta il DIV #immagine a non visualizzato.

Possiamo personalizzare questo codice a nostro piacere… creando una specie di tabella, inserendo i bordi ai DIV, o simili… Sicuramente si tratta di una struttura utile per risparmiare spazio e/o ottenere un effetto dinamico ed elegante.