jQuery Accordion Issues

Question

Got a problem with my home made accordion. Its probably being done in an inefficient way.

html and jQ is on jfiddle ^^

First problem: If you click one item then quickly click another, both will go blue when only the active should go blue, perhaps a problem with the way i've done the 'animate'.

Second problem Not very noticeable at the moment but on the page (maybe when with more content) it jerks near the end of the slide down, just not as smooth as it should be.

Code:

$(document).ready(function(){                                                                                     
    $(".accordion").click(function () {
        $('.acc-content', this).removeClass("na");
        $('.na').slideUp("medium");    
        $('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);
        $('.acc-title').css("backgroundColor", "#77787B");                                                                         
        $('.acc-content', this).slideToggle("medium");                  
        $('.acc-content', this).addClass("na");                    
    });    
});

HTML

<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>

Don't know if it's a problem try this : select title to open it, and click again to close it....the background of title remains blue.. — , Aug 22 '12 at 13:07

score 1 · Answer 1 · answered Aug 22 '12 at 13:01

Add a stop() call before setting the background colour back to the original:

$(".accordion").click(function () {
    $('.acc-content', this).removeClass("na");
    $('.na').slideUp("medium");
    $('.acc-title').stop().css("backgroundColor", "#77787B");   // on this line     
    $('.acc-title', this).animate({"backgroundColor":"#00bff3"},1000);
    $('.acc-content', this).slideToggle("medium");
    $('.acc-content', this).addClass("na");           
});

http://jsfiddle.net/arzEk/2/

This cancels any running animation so no longer continues animating to the highlighted colour.

Don't know if it's a problem try this : select title to open it, and click again to close it....the background of title remains blue.. — , Aug 22 '12 at 13:08

Aesthete · Accepted Answer · 2012-08-22T12:58:45.180

0

Because the animtion runs for a second, it's still running when you press a new tab.

Try stopping the animation on each click:

$('.acc-title').css("backgroundColor", "#77787B");
$('.acc-title').stop(); // Stop the currently-running animation
$('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);

edited Aug 22 '12 at 12:58

answered Aug 22 '12 at 12:49

Aesthete

18,622
6
36
45

Thanks for your response, how would I go about adding a selected class? the '.na' class acts as a selected parameter, no? – nixblu Aug 22 '12 at 12:54
Thank you to Aesthete, Mickel & Richard. You all helped, problem sorted. The problem with the animation was similar to the problem detailed here: http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy but is now solved – nixblu Aug 22 '12 at 19:12

Mickel · Answer 3 · 2012-08-22T13:26:32.640

Yes, you should use stop() to stop any ongoing animations. If you use CSS3 transitions for animations instead, this will be a lot simpler and a bit more maintainable.

http://jsfiddle.net/spuCh/1/

$('.acc-title').click(function() {
    $('.acc-content.na')
        .stop()
        .slideUp()
        .removeClass('na')
            .prev() // The title
                .removeClass('selected');

    $(this)
        .stop()
        .addClass('selected')
        .next() // The content
            .stop()
            .slideDown()
            .addClass('na');
});

As for the "jagging"-part... this is because there's a slight difference for the speed in which the content is collapsing and expanding. You can only solve it by wrapping the whole thing inside a div with a fixed height and hide the overflow (overflow: hidden; in css).

jQuery Accordion Issues

3 Answers3