In questo esempio mostro una funzionalità davvero molto semplice di jQuery: nascondere (o mostrare) un div.
Per quanto questa, anzi queste, due piccole funzioni siano davvero molto molto semplici sono allo stesso tempo estremamente utili, specialmente (parlo del mio caso) quando dobbiamo costruire dei form che variano, ad esempio, a seconda del tipo di utente che si registra (privato, azienda etc).
Ad ogni modo, questa funzione può essere applicata un po’ ovunque all’interno del vostro sito web. Può essere chiamata direttamente alla creazione della pagina oppure al click (come nel nostro caso) di un pulsante.
Per prima cosa vi invito a dare uno sguardo alla documentazione ufficiale di jQuery:
- .hide() http://api.jquery.com/hide/
- .show() http://api.jquery.com/show/
A questo punto riporto tutto il codice per intero e il richiamo alla DEMO di questo articolo.
<!-- JS --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>// <![CDATA[ $(document).ready(function() { //Faccio sparire il pulsante "Mostra" $("#mostra").hide(); $("#nascondi").click(function(){ $("#blocco1").hide(); $("#mostra").show(); }); $("#mostra").click(function(){ $("#blocco1").show(); $("#mostra").hide(); }); }); // ]]></script> <!-- CSS --> </pre> <div align="center"> <div id="contenitore"> <div id="blocco1">Primo blocco</div> <div id="blocco2">Secondo blocco</div> <button id="nascondi">Nascondi</button> <button id="mostra">Mostra</button> Nascondere o mostrare un div con jQuery by Jonathan Domenici - www.jonathandomenici.com © 2013</div> </div> <pre>
Per pura comodità ho scritto un CSS molto molto “al volo” direttamente all’interno della pagina. Ovviamente, come sempre, il CSS ha come unico limite la vostra fantasia.
Analizziamo quindi cosa accade alla pressione del pulsante:
$(document).ready(function() { //Faccio sparire il pulsante "Mostra" $("#mostra").hide(); $("#nascondi").click(function(){ $("#blocco1").hide(); $("#mostra").show(); }); $("#mostra").click(function(){ $("#blocco1").show(); $("#mostra").hide(); }); });
Per prima cosa, al completo caricamento del form, facciamo nascondere il pulsante “Mostra” che poi servirà per far riapparire il div che andremo a nascondere.
Come seconda riga, chiamiamo la funzione click sul pulsante che nasconderà il div. Al suo interno eseguo due operazioni: la prima che nasconde il div “blocco1” e la seconda che a tutti gli effetti fa comparire il pulsante che annullerà “hide” sul blocco1.
La chiamata sul pulsante mostra eseguirà invece le operazioni opposte al pulsante nascondi.
Se ti è piaciuto questo piccolo articolo fammelo sapere!!! Scrivi un commento oppure inviami un’email.
Bel articolo è proprio quello che stavo cercando grazie mille,
ma come faccio a fare in modo che il div all’apertura della pagina rimanga chiuso (che non si veda ), e il pulsante mostra deve avere la funzione sia di apertura che chiusura del div.
Per esempio: un utente apre la pagina, e vede il pulsante mostra (che nel mio caso vorrei chiamare menu, e sostituirlo con un immagine), clicka su questo pulsante e si apre il div con il menu, poi per chiuderlo clicka un’altra volta sullo stesso pulstante ed il menu si chiude. Un po’ come si fa su facebook o youtube.
Ciao Oscar,
grazie per avermi scritto.
Bhe in pratica potresti gestire l’evento semplicemente dando come azione il contrario di quella che hai appena cliccato. Ad esempio se stai nascondendo il div, la tua azione sarà mostra. Giusto ? Bene, dopo averlo fatto mostrare imposto che lo stesso elemento assuma il valore per chiudere.
Ciao
Ciao Oscar, sei riuscito a fare quello che hai chiesto con le indicazioni di Jonathan? io vorrei fare lo stesso, avere cioe´degli elementi (immagini) che funzionano come bottoni, cliccando sopra all´immagine la prima volta si apre un div, e cliccandoci nuovamente una seconda volta si chiude il div. Perö non ci sono riuscita! puoi mandarmi eventualmente un esempio di codice?
Grazie 🙂