jQuery slideToggle jumps at end of dropdown animation

Question

I'm trying to create a sidebar with dropdowns. I'm using Jquery's slideToggle() function for the dropdown animations. My problem is that when the dropdowns animate up and down hiding the other dropdowns, the animation appears choppy and jumpy. I've read some options here but can't seem to find a solution that works for me.

I managed to recreate the sidebar with a JSFiddle here: https://jsfiddle.net/jckly/54m54jq3/

Thanks for any help.

Answer 1

It's due to the padding on the items you're animating. Basically, jQuery is having to animate both the height, and the padding which makes it not very smooth. See this version without padding: https://jsfiddle.net/54m54jq3/1/ I'd recommend adding another div within each menu item, and apply padding to that.

Edit: Try using a callback in your JS so that you don't open a menu until the others are finished hiding: https://jsfiddle.net/54m54jq3/2/

$('.dropdown').on('click', function () {
    var continent;
    $('.dropdown').not(this).slideToggle(300, function () {
        continent = $(this).clone().children().remove().end().text().toLowerCase().trim();
        continent = '.' + continent;
        console.log(continent);
        $(continent).slideToggle(300);
    });
});