Jquery .next IE6/7 issue

Question

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");
        $(".testimonial").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.

Answer 1

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?

Answer 2

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");