Edit in JSFiddle

<div id="faq">
    <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>
</div>

#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;
}