Corsi on-line

Div espandibili con CSS e jQuery

Un effetto molto noto, perché utilizzato in siti Web popolarissimi come per esempio YouTube, è quello che permette di espandere e contrarre dei box all’interno di una pagina, come esemplificato nell’immagine seguente:

In Rete ho trovato un sorgente che permette di fare quanto esposto in modo estremamente veloce; una volta scaricati i file necessari, bisognerà costruire una struttura di pagina estremamente semplice come la seguente:

<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
<div id="comments"></div>
</div>
<div id="footer"></div>

Fatto questo, si passerà alla stilizzazione degli elementi presenti nella pagina tramite CSS:

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

Si potrà ora aggiungere il pulsante per l’espansione e la contrazione del div “content”:

<a id="wideView" href="#">Change View</a>

Questo richiamerà un’apposita classe “wideView” definita tramite JavaScript:

$(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

Infine, basterà definire la dimensione della finestra espansa attraverso un apposito selettore:

#content.wide { width:900px;} 
Post correlati
I più letti del mese
Tematiche