Ciao, in generale si parla di effetto toggle e solitamente viene creato via JavaScript (anche se è comunque possibile realizzare sistemi del genere anche in puro CSS, ma si tratta comunque di accrocchi).
Chiaramente è possibile realizzare tale effetto usando svariati sistemi, anche a seconda del contesto in cui vai a costruirlo (se ad esempio usi framework tipo Bootstrap o altre librerie JavaScript tipo jQuery).

La pagina che hai linkato utilizza un sistema jQuery. In particolare sull'evento click di tale elemento e applicato esattamente questo (rintracciabile attraverso la console web del browser):
codice:
function() {
  $(this).toggleClass('open');
  $(this).next('.toggle-content').slideToggle('slow');
}
E' chiaro che in tal caso il tutto si integra alla struttura di quel contesto, ma puoi comunque vedere qualche tutorial per realizzare tale effetto da zero con jQuery. Il primo link che ho trovato http://www.paitadesign.com/blog/jque...re_nascondere/

Se invece si utilizzasse Bootstrap, sono già integrati sistemi come Collapse con cui risolvere in maniera molto semplice.

Se invece sei un puritano CSS e ti sei puntato nel realizzare tale effetto senza uso di script, in linea di massima puoi farlo sfruttando un elemento checkbox nascosto e qualche regola che, a seconda dello stato di questo, mostra/nasconde uno specifico elemento a seguire.

Qui una guida di base http://www.html.it/articoli/mostrana...ckbox-e-css-1/