Question about jquery hover function

Question

hello,

I make in html a dl construction like this:

<dl id="faq">
                        <dt id="vraag1">Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd id="vraag1-antwoord"><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                        <dt>Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                        <dt>Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                        <dt>Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                        <dt>Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                        <dt>Lorem ipsum dolor sit amet consectuteur?</dt>
                        <dd><p>Nullam scelerisque congue commodo. Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. 
                            Pellentesque condimentum sem ac enim vestibulum quis mollis dolor pellentesque. Nullam scelerisque congue commodo. </p>
                        </dd>
                    </dl>

And i have this javascript:

$("#faq > dt").hover(function() {                   
    $(this).parent('dt').addClass('actief');
        $("#vraag1-antwoord").slideDown(600);
            }, function() {
        $(this).parent('li').removeClass('actief');
    $("#vraag1-antwoord").slideUp(600);
});

$("#vraag1-antwoord").hover(function() {
   $(this).stop().slideDown();
    }, function() {
   $(this).stop().slideUp();
});

Now i have a problem. I want make, that you gone over a then must slidedown a How can i change the function. That javascript find the dt element and open the dd element. When i now hover, all the dd's gone open.

Thanks for the help!

Answer 1

At what point do you execute the javascript? Has the HTML finished loading before you execute it?

$(document).ready(function() {
  // Your code
});