Testi a comparsa, come?

[rubikk]

Salve a tutti, sto cercando di realizzare un sito con qualche funzione un pochetto più evoluta nonostante la mia conoscenza non eccelsa degli argomenti, tant'è che ora mi ritrovo a chiedervi aiuto.

Ho inserito in alcune pagine un link che permette una volta premuto di fare comparire un testo di "approfondimento" dell'argomento trattato usando una funzione javascript semplicissima

function mostraDivScorrevole(){
   $("#divScorrevole").animate({"height": "toggle"}, { duration: 1000 });
}

In questa maniera all'interno del codice html scrivo

<a href="#" style="margin-left:30px;" onclick="mostraDivScorrevole(); return false;">link per far comparire il testo</a>
          <div id="divScorrevole">
             TESTO O QUELLO CHE SERVE
          </div>

Tutto andava bene finché le pagine avevano un solo link di questo tipo, il problema è che mi hanno chiesto di aggiungere la stessa cosa in una pagina che ha diversi link di questo tipo (una FAQ per intenderci, in cui far comparire le risposte alle domande usando questa tecnica) e non so se è possibile modificare il codice che ho già per renderlo più "generico" o se devo trovare un altro sistema... in entrambi i casi qualcuno può darmi una mano?!?

GRAZIE!!!

[RoTeam]

Ti ho fatto un esempio

$(function(){
    $('.linkScorrevole').click(function(){
         $(".divScorrevole").eq($(this).index()/2)
         .animate({"height": "toggle"}, { duration: 1000 });
    });
});

http://jsfiddle.net/Z8J7z/

[rubikk]

Innanzitutto ti ringrazio infinitamente e ti chiedo scusa se ci ho messo un po' a rispondere, ho visto il codice ed in effetti in jsfiddle fa quello che dovrebbe, per qualche ragione però inserendolo nel mio smette di funzionare.
Può dipendere da come sono definite le classi all'interno del CSS? Per chiarire, il mio divScorrevole nel CSS è un id definito come segue:

#divScorrevole{
    display: none;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
}

Trasformandolo semplicemente in classe non cambia il risultato lasciandomi alquanto perplesso, e poi dovrei creare una classe nel css anche per linkScorrevole? E cosa dovrebbe contenere?


P.S. se non è troppo disturbo potresti spiegarmi (anche senza scendere nel dettaglio, quello lo approfondisco da solo quando ho un po' di tempo in più) cosa fa il codice che ha scritto? Lo so, sono una schiappa ma non riesco a decifrare la parte dell'index

[tampertools]

Ce anche la possibilità di farlo con i soli css:
http://jsfiddle.net/7d5cg/embedded/result,html,css/

<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:

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

[rubikk]

Ce anche la possibilità di farlo con i soli css:
http://jsfiddle.net/7d5cg/embedded/result,html,css/

Grazie infinite, in effetti funziona perfettamente!!!
C'è solo una cosa che vorrei chiederti sperando di non approfittare troppo, forse usando le ancore non è possibile fare diversamente ma credi esista una maniera per evitare che quando clicco sul link che fa comparire la descrizione la pagina scorra fino all'inizio della stessa?

[tampertools]

No, per quello serve javascript...
Però mi sembrq giusto che quando clicchi su un link la pagina scorra fino alla risposta, depo tutto l'obbiettivo è proprio leggerla, no?

[rubikk]

Si, credo tu abbia ragione, comunque ti ringrazio davvero, è un'ottima soluzione!!!