Attraverso la combinazione di javascript e css si può ottenere un utile risultato di mostrare elementi all'interno di un div.
La funzione js è molto semplice, non farà altro che cambiare la dichiarazione
display da
none a
block, del css degli elementi che inseriremo all'interno di una variabile dello script.
vediamo come fare nel dettaglio.
inseriamo questo script all'inteno dei tag della pagina in questione.
- Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse
ho chiamato questa funzione toggle (alternare), quindi il div che dovrà contenere gli elementi da mostrare dovrà avere tale identificativo.
- Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse
come vedete, all'interno di var option io ho inserito 12 oggetti, ma se ve ne servono di meno non c'è nessun problema, basta editare lo script secondo le proprie esigenze.
adesso andiamo a inserire i bottoni per nacondere/mostrare gli oggetti all'interno del div contenitore
avremo questo
- Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse
come vedete ogni input richiama la funzione toggle per ogni oggetto contenuto nelle opzioni della variabile, 12 input per 12 oggetti.
continuiamo, inseriamo i div degli oggetti da mostrare/nascondere, anche in questo caso saranno 12
per cui avremo
- Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse
adesso che abbiamo tutti gli elementi dobbiamo creare la situazione di partenza, ossia nascondere i div attraverso il css.
- Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse
finito, potete vedere il risultato su
questa pagina, chiaramente per ottenere il mio stesso risultato bisogna incrementare un pò il codice css e la grafica.