jQuery... Non capisco come fare una cosa..

Ciao a tutti. Sto cercando di fare un piccolo effetto con jQuery,
nulla di che, ma sto incontrando qualche problema sul mio percorso..
Allora l'effetto che vorrei creare è semplicissimo, io ho una lista di
dati, generati dinamicamente da una pagina asp.net.
Questi dati dati non sono altro che delle faq nel seguente formato:

<div id="faq_title" class="faq_title">titolo</div>
<div id="faq_content" class="faq_content">content</div>

Io devo semplicemente nascondere tutti i contenuti delle faq, e
mostrare/nascondere il contenuto al click del relativo titolo...
Ora.. Con jQuery riesco a nascondere i vari contenuti delle faq, ma
poi quando vado a cliccare sul titolo di una faq, me le apre/chiude
tutte e non solo il contenuto della faq relativa come pensavo io....

lo script che uso è il seguente: (sicuramente ci sarà qualche
minchiata di fondo nella mia logica....... XD )

jQuery.noConflict();

jQuery(document).ready(function(){

jQuery(".faq_content").hide();

jQuery("div.faq_title").click(function() {

jQuery("#faq_content").slideToggle("slow");

});

});

Potete darmi un aiuto? grazie mille in anticipo a tutti!

On 4 Feb, 17:48, Alessandro Pellizzari <shuri... (AT) amiran (DOT) it> wrote:

Il Mon, 04 Feb 2008 08:37:07 -0800, davide.espertini ha scritto:

generati dinamicamente da una pagina asp.net. Questi dati dati non sono
altro che delle faq nel seguente formato:

div id="faq_title" class="faq_title">titolo</div> <div id="faq_content"
class="faq_content">content</div

Qui c'e` un errore concettuale: stai usando lo stesso id per molti
elementi diversi. Semplicemente non puoi e non devi.

Cambia la struttura cosi`:

ul class="faq"
li
h2>titolo</h2
p>contenuto</p
/li
li
....
/li
/ul

Ancora meglio sarebbe usare

dl
dt>titolo</dt
dd>contenuto</dd

dt>...</dt
dd>...</dd
/dl

jQuery(document).ready(function(){
jQuery(".faq_content").hide();
jQuery("div.faq_title").click(function() {
jQuery("#faq_content").slideToggle("slow");
});
});

Questo lo cambi cosi` (uso la versione ridotta):

$(document).ready(function() {
$(".faq li p").hide();
$(".faq li h2").click(function() {
$(this).siblings("p").slideToggle("slow");
});

});

Se usi i dd diventa:

$(document).ready(function() {
$(".faq dd").hide();
$(".faq dt").click(function() {
$(this).siblings(1).slideToggle("slow");
});

});

(Sono andato a memoria, controlla se la funzione e` siblings() o
leggermente diversa e se i parametri sono giusti. Il senso e` quello,
comunque).

Bye.

G R A Z I E M I L L E ! ! !

Sei stato gentilissimo e preciso nella spiegazione!

da ora sarai il mio guru!