Hello i'm working in a "button" when clicked it shows/hide things inside a div, and this thing are other divs that I did organize in grids so it have a better display and it's also made to be seen on mobile so here's where the problem starts.

    var vid = document.getElementById("vids3");
    if (vid.style.display == "none") {
        vid.style.display = "grid";
       pageScroll();
       return
    } return vid.style.display = "none";
}

this function injects the grid style in the html but it also blocks me from changing the style using css, this section of code below works, but only if, I do set it to be !important, but it breaks the code since this section is supossed to be hidden until user try acessing it.

    #vids3{
        overflow-x: scroll; 
        display:flex;
    }

Basically I need other ways to change my display style value so it doesn't goes to the top priority

html div: <div class = 'videogrids' id = 'vids3' style = "display:none">