Ce anche la possibilità di farlo con i soli css:
http://jsfiddle.net/7d5cg/embedded/result,html,css/
codice HTML:
<div id="faqs">
   <a href="#faq1">Perché le mucche hanno le macchie?</a>
    <div id="faq1">(Spiagazione lunga e noiosa)</div>
   <a href="#faq2">Perché gli elefanti hanno la proboscide?</a>
    <div id="faq2">(Un'altra spiagazione lunga e noiosa)</div>
   <!-- Tutte le altre faq -->
</div>
CSS:
codice:
#faq div {
    overflow: hidden;
    max-height: 0px;
    opacity: 0;
    transition: .7s all ease;
}


#faq div:target {
    opacity: 1;
    max-height: 20px; // Se vuoi che gli elementi abbiano un'altezza fissa qui metti quella, altrimenti questo valore deve essere il più vicino possibile all'altezza del più alto (superandolo)
    transition: .7s all ease;
}