0

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">

JayJay
  • 3
  • 2
  • 2
    Use a class that you add and remove, and add the class to the CSS. – Barmar Apr 29 '22 at 02:12
  • Look here if you are unfamiliar with how to do what @Barmar is recommending. https://stackoverflow.com/questions/26736587/how-to-add-and-remove-classes-in-javascript-without-jquery – Ryan O'D Apr 29 '22 at 03:23
  • I was, then I did this and it worked, thanks! with that I was able to remove the style at the html div `if (vid.classList[0] == 'hidden') { vid.classList.add('videogrids'); vid.classList.remove("hidden"); }` – JayJay Apr 29 '22 at 03:42
  • Now I learned something new, thx! – JayJay Apr 29 '22 at 03:47

0 Answers0