views:

555

answers:

2

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!

+1  A: 

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

});
redsquare
thanks redsquare (again!) - but it didn't seem to make any difference, still doing the same thing... Does using a nodeName make the rule more specific?
lorenzium
just makes the selector faster. Can you past the markup for me
redsquare
a .class selector will search through all elements where as div.class can use getElementsByTagName first
redsquare
according to the next docs - http://docs.jquery.com/Traversing/next , passing an expression will filter the next sibling element(s), so is only really useful when the initial selector contains more than one element, which is not the case when using $(this) as the selector
Russ Cam
Thanks guys. I got it going locally using only the HTML and javascript above and bingo! In my development work though it is not working, must be conflicting with something else... Cheers.
lorenzium
+1  A: 

You might need to upgrade your Accordion library as well. Some style selectors like the [@attr] style selectors that the Accordion uses might have been deprecated already.

Randell