Question

I coded an accordion in jquery, It works fairly well however upon closing a previously opened section I get a bounce.

I tried setting an active class and checking for that but ripped it out to save a headache.

My Jquery:

var $runAccordionOnce = 0; var $accordionPrev;

$(document).ready(function(){
    $(".sidebar_game_header").click(function(){
                  if($runAccordionOnce > 0) {

                  $accordionPrev.slideUp('normal');
                  $accordionPrev.prev().css({'background-position' : 'top left'});

                  }

                  $accordionPrev = $(this).next();
                  $(this).next().slideDown('normal');   
                  $(this).css({'background-position' : 'bottom left'});
                  $runAccordionOnce++;            
    });
    });

And a sample of my html, each game section follows this layout:

<div class="sidebar_game_header"><div class="sidebar_game_header_text">Original Titles</div></div>
    <div class="sidebar_game_content">          
    <ul>
        <li><a href="<?php {echo $url . "&amp;game_id=9";} ?>">Game 1</a></li>
            <li><a href="<?php {echo $url . "&amp;game_id=10";} ?>">Game 2</a></li>
            <li><a href="<?php {echo $url . "&amp;game_id=8";} ?>">Game 3</a></li>
    </ul>
    </div>
</div>

The issue seems to be that upon clicking a section header that is already open it will slide up before sliding down again.
The rest works, clicking a different section will close the previously opened one.

This has been driving me crazy for a while. Any tips?

Thanks!

Answer 1

I believe this should do it. Basically only try to re-display the section if it’s hidden. I wasn’t entirely sure what you wanted to happen when you click on an already open one though. The below code will hide it.

$(document).ready(function(){
    $(".sidebar_game_header").click(function(){
                  if($runAccordionOnce > 0) {

                  $accordionPrev.slideUp('normal');
                  $accordionPrev.prev().css({'background-position' : 'top left'});

                  }


        if($(this).next().is(":hidden")){
                  $accordionPrev = $(this).next();
                  $(this).next().slideDown('normal');   
                  $(this).css({'background-position' : 'bottom left'});
                  $runAccordionOnce++;    
        }        
    });
    });

If you don’t want it hidden, then just check at the very beginning if the one you clicked on is the one in $accordionPrev and don’t hide it.

var $runAccordionOnce = 0;
var $accordionPrev;

$(document).ready(function() {
    $(".sidebar_game_header").click(function() {
        if ($runAccordionOnce > 0) {

            if ($(this).next()[0] == $accordionPrev[0]) return;

            $accordionPrev.slideUp('normal');
            $accordionPrev.prev().css({
                'background-position': 'top left'
            });

        }


        $accordionPrev = $(this).next();
        $(this).next().slideDown('normal');
        $(this).css({
            'background-position': 'bottom left'
        });
        $runAccordionOnce++;

    });
});