Expand and Collapse List

by Harsh Bhatnagar

HTML

<div id="expand">
    <dl> <dt>Q: <a href="#">What is the question?</a></dt>

        <dd>A: The answer to the question!</dd>
    </dl>
    <dl> <dt>Q: <a href="#">What is the question?</a></dt>

        <dd>A: The answer to the question!</dd>
    </dl>
    <dl> <dt>Q: <a href="#">What is the question?</a></dt>

        <dd>A: The answer to the question!</dd>
    </dl>
</div>

CSS

dt {
    color: black;
    font-weight: bold;
}

dt a {
    color: red;
}

dd {
    margin: 0;
    padding: 0;
    display: none
}

JavaScript

$("#expand dt a").click(function() {
    $(this).parent().siblings("dd").slideToggle();
});