Manipulating the Player Menu with Javascript

In my back of my mind there was a whisper...this will not work... the solution i suggested... so i made a quick test and indeed my inner voice was correct.

querySelectorAll normally works fine for selecting elements, but in this case you need a child of an element selected and even tougher...the nth-child(1) where the number is going up. Probably to 100 in your case.

I however knew i figured this out before and luckily i have a big library of Javascript snippets to use and reuse meanwhile so the solution was found quickly.

We need a loop over the nth-child.

So i changed my function to this.

switchStyle(3);

function switchStyle( _amount ){
        for(var i=1; i <= _amount;i++){
            // as we need nth-child(1) etc. etc. we need to loop this too
            var el = document.querySelector("#outline-content > ul > li > ul > li:nth-child("+i+") > div");
            //doSomething for all using a terniary operator as if/else check
            el.style.display === "none" ? (el.style.display = "flex") : (el.style.display = "none");
        }
}

So now this is a function to disable all ( or some ) of the menu lists. You just have to pass along the amount of listitems that need to be hidden and it works nicely.

Sample added.

Kind regards,
Math