Con il design per l'area dei frammenti "fatto", ora possiamo passare a una certa interattività (leggi: JavaScript).
Aggiungiamo un rollover super debole per i collegamenti a sinistra solo così abbiamo qualcosa, ma sappiamo che lo cambieremo in seguito. Quindi abbiamo iniziato a scrivere effettivamente un po 'di JavaScript. Visitando la pagina per la prima volta, la prima categoria (HTML) sarà attiva. Attivo, significa che ha la classe "attivo" sulla voce di elenco per HTML. Il CSS influisce su quella classe, dandogli un valore z-index, che aumenta visivamente il collegamento sopra l'ombra e lo collega alla linea di colore pieno che separa le due colonne.
Il trucco sta per essere quando fai clic su una categoria diversa, per rimuovere la classe attiva sulla categoria attualmente attiva e applicarla a quella appena cliccata. In realtà è abbastanza banale, solo poche righe di jQuery in uno script che carichiamo solo su questa pagina. Inoltre, l'elenco degli snippet nella colonna di destra deve mostrare l'insieme corretto di collegamenti, che di nuovo è solo un cambio di classe e una semplice manipolazione mostra / nascondi.
Tutto ciò che resta ora è lo stile delle pagine per i singoli frammenti.