jquery toggle on dt element working in Firefox but not other browsers

Question

The following works in Firefox but in no other browser. Is the parent child relationship of <dl>s different in the different browsers?

$('dd').parent().find('h3').toggle(
    function(){
        $(this).next('dd').slideDown(500);
    },
    function(){
        $(this).next('dd').slideUp(500);
    }
);

HTML looks like:

<dt><h3>stuff to be clicked</h3></dt>
<dd><p>stuff in dd might look like this with internal elements</p>
    <ul>
        <li>stuff1</li>
        <li>stuff2 </li>
        <li>stuff3 </li>
   </ul>
</dd>

Answer 1

Your function logic is wrong, but it's working in firefox since it deals with your HTML different than other browsers.

The next() function looks at the immediate sibling of the element in question. You are doing this on the h3 element:

<dt><h3>stuff to be clicked</h3></dt>

As you can see, there are no immediate siblings to the h3 tag. It has no siblings (and thus no next()).

So why does firefox work? Because your HTML is also invalid. According to the specifications of the DT tag the dt tag takes only inline elements and the h3 tag is not an inline tag. Why does this matter? Because different browsers deal differently with invalid documents. Firefox, in this case, kicks out the h3 tag or the dt tag, leaving your document structure like this:

<dt></dt>
<h3>stuff to be clicked</h3>
<dd><p>stuff in dd might look like this with internal elements</p>
    <ul>
        <li>stuff1</li>
        <li>stuff2 </li>
        <li>stuff3 </li>
   </ul>
</dd>

So in Firefox' case, the h3 element actually becomes siblings with the dd tag, and your code works. However, in other browsers (such as Chrome, which is tested on), the h3 tag remains inside the dt tag and your code doesn't work.