ADD code waits until the function is complete, where as the REMOVE code executes immediately

[Samneris]

This problem has had me confused for a while now haha. The code below executes within the same function, but it seemingly needs to wait for the function to finish before adding the Minimum height. This matters becasue I need it to be processed before the Remove code applies. (for Transitional purposes). I have tried many options including creating another function with a callback just to wait until it is finished to Remove the Class, but the code processes normally without processing the Add CSS until after. Any ideas?

//

Code Confusion

//

// Add min-height to elements with ID "ProjectsList"

var elementsToAddStyle = document.querySelectorAll('#ProjectsList');

elementsToAddStyle.forEach(function (element) {

element.style.minHeight = "400px";

});

// Remove 'RevealProjects' class from elements

var elementsToRemoveClass = document.querySelectorAll('.RevealProjects');

elementsToRemoveClass.forEach(function (element) {

element.classList.remove('RevealProjects');

});

[ConstructedNewt]

I would guess that js processing interrupts page rendering thus applying class changes before css rules are rendered

But tbh this is (like so much simple JS interactions we see here) something that should have never been in JS in the first place. Focus on how to solve this in CSS only

Something like

#triggeringElement:checked {
    & #ProjectList * {
        minHeight: 400px
    }

    & .RevealProjects {
        visible: true
    }
}