Question

As it is user had to click on the same dt twice to hide its child element, how can I make it so it hides once any other dt is clicked.
Thanks in advance.

<script type="text/javascript">
$(document).ready(function () {
        $('#faq').find('dd').hide().end().find('dt').click(function () {
            $(this).next().slideToggle();
        });
    });
</script>

<dl id="faq">
    <dt>Question 1?</dt>
    <dd>
        Weee look at me I can type!!!
    </dd>

    <dt>Question 2?</dt>
    <dd>
        Weee look at me I can type too!!!
    </dd>
</dl>

Answer 1

I’m going to assume you want only one dd to show at a time, and post this code:

$(document).ready(function () {
    $('#faq').find('dd').hide().end().find('dt').click(function () {
        $(this).next().slideDown();
        $(this).siblings('dd').not($(this).next()).slideUp();
    });
});

• $(this).next().slideDown(); slides down the next element, which is a dd element, and slides it down.
• $(this).siblings('dd').not($(this).next()).slideUp(); slides up all other dd elements (the .not($(this).next()) bit).

.siblings() is what you’re looking for, along with .not().

Demonstration JSFiddle here.