CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nixblu
nixblu

Reputation: 89

jQuery Accordion Issues

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

http://jsfiddle.net/arzEk/1

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>

Upvotes: 1

Views: 404

Answers (3)

Mickel
Mickel

Reputation: 6696

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).

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

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.

Upvotes: 1

Aesthete
Aesthete

Reputation: 18850

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

Upvotes: 0

Related Questions