CODEWITHSUNDEEP
jquerycssaccordion
monsterboy
monsterboy

Reputation: 153

Simple jQuery Accordion Menu jumping

I'm trying to implement an jquery accordion menu but, I'm having a slight problem which I cannot figure out myself.

I used this tutorial http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/ to built it and all works fine except, every time I select a new item the whole menu jumps up slightly.

I'm guessing it is something to do with the css but, cannot find it. Also, could you tell me how I could highlight the menu bar when open, here's the script.

$(document).ready(function() { 
//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('slow');
    $(this).next().slideDown('slow');
}); 
//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();
});

Any help would be greatly appreciated! Thanks

Upvotes: 2

Views: 1803

Answers (2)

xpy
xpy

Reputation: 5611

I'm not so sure about this, but I have encountered some kind of same problem in the past. When animating heights ( or widths ) in px you can't have decimal values, they'll be converted to integers via round. So if you are animating two elements simultaneously and one of them at some point is set to a height of 9.5 and the other to 10.5 they will be converted to 10 and 11 accordingly so they'll have a sum of 21px height instead of 20px. And that's why their total height grows and shrinks during the animation and produces this flickering.

Upvotes: 1

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

If you go to his demo page's source and open his javascript then you'll find a different code. The code in link is buggy. If you click an item again it will slideup and slide down.

$(document).ready(function() {

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 

     });


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');

    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.accordionContent').hide();

});

To avoid jerk try using jqueryui accordion

Upvotes: 2

Related Questions