Question

I need a little advice regarding my problem with my vertical menu.

My problem is now that when I click a Button my other Buttons are moved a pixel down and then straight back up again. Just looks rooten. For example click on “Michael”, “Jones”, “Kuwait” our “Superman”. You will see a small shift towards the bottom of the screen and then it resets itself to its original position.

var accordion_head = $('.accordion > li > a'),  
accordion_body = $('.accordion li > .sub-menu');
accordion_head.on('click', function (event) {
    if ($(this).attr('class') != 'active') {
        accordion_body.slideUp('normal');
        $(this).next().stop(true, true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
    }
});

You can find it here: http://jsfiddle.net/RTcf3/

How can this be fixed? Help is appreciated.

Thanks a lot and have a great weekend

TD.

Answer 1

Edit: I would change your code a bit and make it check if the current menu actually has a submenu so it won’t try to show a ul that is empty (in case you’ll have some menus with submenus, and others without submenus). Let me know if you need help to do that.

Here’s what I have on this fiddle:

$('.accordion > li').on('click', function (evt) {
    var accordion_body = $('.sub-menu', this);
    if($(this).hasClass('active')) {

    } else {
        $('.active .sub-menu').slideUp();
        $('.active').removeClass('active');
        $(this).addClass('active');
        if(accordion_body.is(':empty')){

        } else {
            accordion_body.slideDown('normal');
        }
    }   
});

I also did a small change on your CSS. You have an anchor link displaying: relative. It makes no sense at all since it will never have a child tag.