javascript/Jquery Accordion is not working right.

Question

Hi guys,

I have problems with jquery accordion. It seems quite tricky.

The first accordion, project1, is working great (thanks to Nick Craver) but 2nd & 3rd an so on does not work. I do not really know if I should use .filter.

Here is the code & example page: http://jsfiddle.net/THjgV/2/

Thank you.

Answer 1

Since they all have different heights, you need to store and use each height independently, I suggest using $.data() and .data() for this. Also change your IDs to classes as they should be unique.

$('.slickbox').hide().each(function() {
    $.data(this, 'height', $(this).height());
});
$('.more a').toggle(function() {
    var sb = $(this).parent().prev('.slickbox').slideDown(3200);
    $('html, body').animate({
        scrollTop: '+=' + sb.data('height')
    }, 3200);
    return false;
}, function() {
    var sb = $(this).parent().prev('.slickbox').slideUp(3200);
    $('html, body').animate({
        scrollTop: '-=' + sb.data('height')
    }, 3200);
    return false;
});

You can test it out here, this loops through and stores the heights of each .slickbox (now using a class!) and stores it. When each link is clicked it's specifically toggling the class="slickbox" element that precedes it, and uses it's stored 'height' value for scrolling.