Side menu transition with easing

Question

Hello! I want to put an "easing" effect to make more "smooth" the transition from the side menu that collects/expands on my site because when I click on the button to collect it only collects in thousandths of a second, with no effect.

Expanded:

Collected:

I made an example of how it is in this Website.

JS:

$("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
$("body").toggleClass("sidebar-toggled");
$(".sidebar").toggleClass("toggled"); }

CSS:

body.sidebar-toggled footer.sticky-footer {width: 100%;}

Answer 1

In your ul <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> place transition: 500ms all; and you will give a "attenuated" transition in the gathering of the side bar as you can see in the picture.