max-height toggle animation on Accordion

Question

I have a simple accordion, a transition property on maxHeight. The clickevent listener is on the parent ul element when I toggle between the max-height(click event) why does all the elements shift to the left slightly? (This happens only to the 2nd and 3rd ul element i.e"Web Development" and "AI and Machine Learning") Can someone help me understand

Here is the codepen

https://codepen.io/sabgalaxy/pen/XWJXGWy

let containers = document.getElementsByClassName("container");


for(let container of containers){
    container.addEventListener("click",() => {
    /*Get the child ul element*/           
   let dropdownElement = container.childNodes[1].childNodes[7];
    if (dropdownElement.style.maxHeight) {
      dropdownElement.style.maxHeight = null;
    } else {
      dropdownElement.style.maxHeight = dropdownElement.scrollHeight + "px";
    }

  });
}

@Laif: updated my question, it only occurs when you click on the 2nd and 3rd ul element, you will notice the header and th top ul elements move the left slightly — sab, Dec 10 '19 at 19:08
It it opening a scrollbar for you? the only left pushing that happens for me is when a scrollbar is generated the the page re-adjusts. — Libra, Dec 10 '19 at 19:13
@Laif you are absolutely correct, I was wrong in my explanation, any idea why the scrollbar is being generated? I am only controlling the height not the width — sab, Dec 10 '19 at 19:16
Expanding the height is exactly what would cause a scrollbar to appear, not the width. — Libra, Dec 10 '19 at 19:17
your right, but how do I control the page re-adjustment? I am looking for a smooth toggle like it happens for the first ul element — sab, Dec 10 '19 at 19:20
The first ul element can cause the same kind of thing. is your accordion going to be this large on your website? that's the only reason it's happening. re-size either the accordion or the viewport. I linked a more complicated way of fixing it below — Libra, Dec 10 '19 at 19:21
@sab glad I could help, would you mind marking the answer as "answered" so as to close it? — Libra, Dec 10 '19 at 19:24

score 2 · Accepted Answer · answered Dec 10 '19 at 19:20

This is happening because when the accordion expands, the browser is generating a scrollbar to the right hand side of the screen, which narrows the view port and "pushes" everything left. You could acknowledge this in several different ways.

First and foremost, in normal conventions the accordion menu really shouldn't cause a page overflow to begin with. There isn't really any reason this should happen.

To prevent this kind of thing from happening if you don't want to change the structure of your page, take a look at this thread:

Prevent scroll-bar from adding-up to the Width of page on Chrome

max-height toggle animation on Accordion

1 Answers1