jquerydom

Noobie Jquery Question

I've been working with Jquery fro a grand total of two hours now. Up until this point I have made this really simple FAQ page.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#void").click(function(event)
     {
        event.preventDefault();
    });

  $('#faq').find('dd').hide().end().find('dt').click(function() {
 $(this).next().slideToggle();   
});

});


</script>


    <dl id="faq">
        <dt><a href="" id="void">Coffee</a></dt>
            <dd>- black hot drink</dd>
    <dt><a href="" id="void">Milk</a></dt>
        <dd>- white cold drink</dd>
    </dl>

The problem is only the first item is working. My questions are, why is only the first entree working and how do I fix it? I've tried using an each() but I am unsure where to put it.

Solution

  • The jQuery looks fine. Try fixing the markup. In particular, id="void" appears twice - an id should be unique in the document, use class instead.