Question

Ok, so somewhere, something is wrong. When I was using version 1.3 the accordion was working fine. When I upgraded jQuery to version 1.3.2 it now no longer works as it’s supposed to. I need the latest version because it is solving some errors that IE6 was throwing up…

So here’s the code, and what needs to change in order for it to work with jQuery’s latest vesion?

$(function() {

$(".accordion h4").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h4").click(function(){
    $(this).next(".accordion div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger('click');

});

HTML goes something like:

<div class="accordion">

<h4 id="open">Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

I should note, that where it is not working, is that when expanding a second panel, the first panel should collapse as normal – but with 1.3.2 it is not the case…

---

*I have updated the HTML with what I really had going on, as it seems that it was the HTML/CSS that was giving problems.

I had the CSS set to:

li strong{display:block;float:left;width:250px;background:#ccc;}
li em{display:block;float:left;width:700px;background:#ddd;}

in order for it to give a “2-columned table-like” effect (and for easy client-CMS editing – hit the “bold” button and hit the “i” button) – but it seems that it was this floating of the elements that made the accordion not work. When I removed the “float: left;” – it worked again as normal.

And it doesn’t take away from the fact that this same set-up works with jquery1.3.0 but not with jquery1.3.2 – so something is still amiss!

Answer 1

I believe your selector $(this).next(".accordion div") will not work. next() only grabs the next sibling therefore doing a filter that looks at children is odd.

Also try to use selectors with a nodeName rather than a pure css class selector.
Use div.accordian rather than just .accordian in your js

Try

 $(function() {
   $("div.accordion h4").eq(2).addClass("active");
   $("div.accordion div").eq(2).show();

   $("div.accordion h4").live('click', function(){
       var $el = $(this);
       $el.next()
          .slideToggle("slow")
          .siblings("div:visible")
          .slideUp("slow");
       $el.toggleClass("active");
       $el.siblings("h4").removeClass("active");
   });

   $("div.accordion div").hide();

   $("h4#open").trigger('click');

});