[jQuery] Toggle Script not working in IE6

[Stinhambo]

Hi all,

I have been wrestling with this all day and finally found a solution
only to find it doesn't work in.... IE6!

Here is my HTML -

[code]
<dl>
        <dt class="section"><a href="">Solutions by Business Need</a></dt>

                <dl>
                        <dt class="solution"><a href="">Solution 1</a></dt>
                        <dd><a href="">Product Name #1</a></dd>
                        <dd><a href="">Product Name #2</a></dd>
                        <dd><a href="">Product Name #3</a></dd>

                        <dt class="solution"><a href="">Solution 2</a></dt>
                        <dd><a href="">Product Name #1</a></dd>
                        <dd><a href="">Product Name #2</a></dd>
                        <dd><a href="">Product Name #3</a></dd>
                </dl>
</dl>
[/code]

And here is the jQuery -

[code]
$(document).ready(function() {

$("dt.section").click(function(){
        $(this).next().toggle();
        $(this).toggleClass("open");
        return false;
});

$("dt.solution").click(function() {
        var obj = $(this).next();
        while (obj.is("dd")) {
                obj.toggle();
                obj = obj.next();
        }
        return false;
});
});
[/code]

What is does is opens the first dt (dt.section) to reveal the nested
definition list inside. From there you can click dt.solution and this
reveals all the dd elements relating to that dt.

It works great in Safari and FF but not IE6 or IE7. Can anyone tell me
why this wouldn't work?