JQuery : Show/Hide slideToggle

[unreg]

Ciao,

ho una pagina così strutturata:

<dl>
    <dt>[url="#"]Test 1[/url]</dt>
    <dd>Prova 1</dd>
    <dt>[url="#"]Test 2[/url]</dt>
    <dd>Prova 2</dd>
    <dt>[url="#"]Test 3[/url]</dt>
    <dd>Prova 1</dd>
</dl> 

vorrei che al carricamento della pagina tutti gli elementi dd siano nascosti (display:none)

e al click del link si apre solo il relativo elemento dd magari con effetto slideToggle usando JQuery.

come posso fare ?

grazie !

[cavicchiandrea]

Tu fin dove sei arrivato?

[dwj]

Ciao, questa è la versione più semplice dello script che ti serve:

$(document).ready(function () {

    $('dd').hide();
    $('dt a').click(function () {
          $(this).parent().next().slideToggle();
    })

});

Tieni conto di due questioni:

1) poichè nascondi i dd al DOMready, potresti imbatterti in un "effetto flash" in cui vedresti inizialmente i dd aperti (finché il documento si carica) e solo successivamente li vedresti scomparire. In tal caso ti conviene nascondere gli elementi via CSS

2) con questo script le coppie dt/dd sono indipendenti, se volessi realizzare un effetto accordion (solo un elemento aperto alla volta) devi modificare lo script in questo modo:

$(document).ready(function () {
    var $dds = $('dd');
    
    $dds.hide();
    
    $('dt a').click(function () {
          var $dd = $(this).parent().next();
        
        $dds.not($dd).slideUp();
        $dd.slideToggle();
    });
});

Ho creato un esempio dinamico su jsfiddle.net

[unreg]

Originariamente inviato da dwj
Ciao, questa è la versione più semplice dello script che ti serve:

$(document).ready(function () {

    $('dd').hide();
    $('dt a').click(function () {
          $(this).parent().next().slideToggle();
    })

});

Tieni conto di due questioni:

1) poichè nascondi i dd al DOMready, potresti imbatterti in un "effetto flash" in cui vedresti inizialmente i dd aperti (finché il documento si carica) e solo successivamente li vedresti scomparire. In tal caso ti conviene nascondere gli elementi via CSS

2) con questo script le coppie dt/dd sono indipendenti, se volessi realizzare un effetto accordion (solo un elemento aperto alla volta) devi modificare lo script in questo modo:

$(document).ready(function () {
    var $dds = $('dd');
    
    $dds.hide();
    
    $('dt a').click(function () {
          var $dd = $(this).parent().next();
        
        $dds.not($dd).slideUp();
        $dd.slideToggle();
    });
});

Ho creato un esempio dinamico su jsfiddle.net

Grazie 1000000

un'ultima cosa per favore,

è possibile applicare una classe al dt cliccato ?

inoltre c'è un modo per non far salire a inizio pagina dopo il click ?

grazie !

p.s. con firefox non va

[dwj]

Ops scusa x la dimenticanza.

La pagina va all'inizio perché quando clicchi sul link vengono prima eseguiti gli eventi JavaScript e poi quello di default dell'elemento (in questo caso vieni rimandato a "#" --> inizio pagina)

Per ovviare al problema la soluzione puù rapida è aggiungere, alla fine della funzione un return false;

$(document).ready(function () {
    var $dds = $('dd');
    
    $dds.hide();
    
    $('dt a').click(function () {
          var $dd = $(this).parent().next();
        
        $dds.not($dd).slideUp();
        $dd.slideToggle();

        return false;
    });
});

Ho aggiornato l'esempio su jsfiddle: http://jsfiddle.net/dwightjack/ujz7m/1/

Aprendolo con FF9 nn ho problemi. Se hai installato Firebug, prova ad aprire la console ed a verificare l'errore che viene restituito.

ciao!

[unreg]

Firefox OK, avevo il javascritp disabilitato

Ho aggiornato lo scritp alle mie esigenze:

http://jsfiddle.net/ujz7m/5/

Solo che alla chiusura su ie non rispetta la regola css margin: 2em 0;

mentre su FF tutto OK.

Inoltre vorrei applicare la classe .attivo al dt cliccato, ma come ?

grazie di cuore

Originariamente inviato da dwj
Ops scusa x la dimenticanza.

La pagina va all'inizio perché quando clicchi sul link vengono prima eseguiti gli eventi JavaScript e poi quello di default dell'elemento (in questo caso vieni rimandato a "#" --> inizio pagina)

Per ovviare al problema la soluzione puù rapida è aggiungere, alla fine della funzione un return false;

$(document).ready(function () {
    var $dds = $('dd');
    
    $dds.hide();
    
    $('dt a').click(function () {
          var $dd = $(this).parent().next();
        
        $dds.not($dd).slideUp();
        $dd.slideToggle();

        return false;
    });
});

Ho aggiornato l'esempio su jsfiddle: http://jsfiddle.net/dwightjack/ujz7m/1/

Aprendolo con FF9 nn ho problemi. Se hai installato Firebug, prova ad aprire la console ed a verificare l'errore che viene restituito.

ciao!

[unreg]

non riesco ad applicare

.addClass("attivo"); 

all'elemento dt cliccato

[unreg]

$(document).ready(function () {
    var $dds = $('dd');
    $dds.hide();
    $('dt a').click(function () {
        var $dd = $(this).parent().next();
        $dds.not($dd).slideUp();
        $dd.slideToggle();
        $(this).parent('dt').addClass('attivo');
        return false;
    });
}); 

sono riuscito ad applicare la classe

$(this).parent('dt').addClass('attivo');

ma non riesco a toglierla all'apertura di un'altro

una cosa del genere

$dds.not($dd).removeClass('attivo').slideUp();

aiuto

grazie !

[unreg]

$(document).ready(function () {
    var $dds = $('dd');
    $dds.hide();
    $('dt a').click(function () {
        var $dd = $(this).parent().next();
        $dds.not($dd).slideUp();
        $('dt').removeClass('attivo');
        $dd.slideToggle();
        $(this).parent('dt').addClass('attivo');
        return false;
    });
}); 

Ci sono riuscito

Grazie DWJ