Jquery .next IE6/7 issue

I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.

I think the java is somewhat self explanatory...

When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.

On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.

<script type="text/javascript">
$(document).ready(function(){
    $(".testimonial:first").show();
    $("li.testID:first").addClass("selectedName");

    $("li.testID").click(function(){
        $("li.testID").removeClass("selectedName");
        $(this).addClass("selectedName");
        $(".t开发者_运维问答estimonial").hide();
        $(this).next(".testimonial").fadeIn("slow");
    });
});
</script>

Example of markup

<ul id="testName">
  <li class="testID">Persons Name</li>
    <blockquote class="testimonial">
      <span class="bqStart">&#8220;</span>
        Testimoinal here
      <span class="bqEnd">&#8221;</span><br /><br />     
      <span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
    </blockquote>

As a side note this is working fine in FF and Safari

Your help is greatly appreciated.

Thanks.

It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?

Is .testimonial the class you have given to your lists? <ul> or <ol>

It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.

Please try this instead:

$(this).parent().next(".testimonial").fadeIn("slow");