How to apply jquery effect to nested element?

Question

I am working on a simple FAQ page that will show/hide answers on clicked questions. It works fine when using the p element and nothing else but any nested ul element is left out and not hidden. Does the nested element have to be called separately? Why isn't the effect applied to it as a part of the p tag? Thanks for the help.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

 <script language="javascript" type="text/javascript">

$(document).ready(function () {
    $(".answer").hide();
    $("a.question").click(function () {
      $(this).next(".answer").slideToggle(300);
      return false;
    });
 });
</script> 
<div id="body"> 
<ul style="list-style: none;"> 
<li><a class="question" href="#">How do I log in to email?</a> 
<p class="answer">
    <ul>
        <li>Open your favorite internet browser to <a href="https://email.school.edu"&gt;email.school.edu&lt;/a&gt;.&lt;/li&gt;
        <li>Use your school username and the password given to you by ITS.</li>
        <li>You will be required to change your password immediately.</li>
    </ul>
</p> 
</li> 
<li><a class="question" href="#">Is my email password the same as my school password?</a> 
<p class="answer">No. After logging in to email for the first time, you will be required to change your password. It is your option to use the same password or create another password; however, ITS strongly encourages you to create a <strong>Strong</strong> password as indicated on the status bar in the email password site. Keep in mind that if you change your school password, your email password will not change and vice versa.</p> 
</li> 
</ul>
</div>

Screenshot

Answer 1

It has something to do with the way the browser treats paragraph tags. If you inspect your current setup in Firebug, you'll see that Firefox doesn't interpret the ul as a child. However, if you switch to div's, it'll work properly. Shown at: http://jsfiddle.net/4q9Dp/

Answer 2

To expand BBonfield's point, the problem is that <ul> is a block-level element. The <p> element cannot contain block-level elements (see http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 for the W3C definition of this). The browser therefore automatically closes the <p> tag before the <ul> starts. The solution is to use the <div> tag, which is intended for logical divisions like those in your document.

A useful tutorial on the difference between inline and block-level elements: http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm