Question

Currently I’m using dt and dd to display some data. What I’m doing here is initially set the dd to display: none and when the dt is clicked display the associate dd.

My HTML markup is

<dt >
       <h1>click here</h1>
</dt>
<dd style="display: none;">
       <h1> DD Data </h1>
</dd>

<dt >
       <h1>click here</h1>
</dt>
<dd style="display: none;">
       <h1> DD Data </h1>
</dd>

jQuery I’m using is

$('dt').live('click', function () {
var dd = $(this).next();

if (!dd.is(':animated')) {
    dd.slideToggle();
    $(this).toggleClass('opened');
}

What I want to do now is to allow one dd to display at a time. When if there is one dd is displaying and if another dt is clicked, i want to close the currently opened dd and display the dd which associate with the clicked dt.

Any help will be appreciate

Answer 1

You could do:

$('dt').live('click', function () {
    var nextDD = $(this).next('dd');
    $('dd').hide();
    nextDD.show();


});

Fiddle here: http://jsfiddle.net/ktYgB/