back to top

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.

Altri contenuti interessanti

Pubblicità

Leggi anche...

Il file manifest.json: cos’è e a cosa serve

Il file manifest.json è un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale è un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicità