Med designet for utdragsområdet “ferdig” - kan vi nå gå over til litt interaktivitet (les: JavaScript).
Vi legger til en super halt rollover for koblingene til venstre bare så vi har noe, men vi vet at vi vil endre det senere. Så satte vi i gang med å skrive litt JavaScript. Når du besøker siden for første gang, vil den første kategorien (HTML) være aktiv. Aktiv, noe som betyr at den har klassen "aktiv" på listeelementet for HTML. CSS påvirker den klassen og gir den en z-indeksverdi, som visuelt stiger lenken over skyggen og kobler den til den fargede linjen som skiller de to kolonnene.
Trikset kommer til å være når du klikker på en annen kategori, for å fjerne den aktive klassen på den aktive kategorien og bruke den på den nylig klikkede. Det er ganske trivielt, bare noen få linjer med jQuery i et skript som vi bare laster inn på denne siden. Også da må listen over utdrag i høyre kolonne vise riktig sett med lenker, som igjen bare er noe klasseskiftende og enkel vis / skjul manipulering.
Alt som er igjen nå er å utforme sidene for individuelle utdrag.