'How to set an elements initial state to be hidden?

I use an extention that allows me to edit the css of Youtube. I need the navigation menu on the left of youtube home page to be hidden when the webpage loads and appear when the menu button is clicked.

This is how it looks now

Is there any way I can do this?

The extention can use Javascript too.

HTML code when the bar is open:

<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y;" position="left" swipe-open="" opened="" persistent="">

HTML code when the bar is closed:

<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y;" position="left" swipe-open="" persistent="">

HTML code of the button

<yt-icon-button id="guide-button" toggleable="true" class="style-scope ytd-masthead"><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Guide" aria-pressed="true">
javascripthtmlcss


Solution 1:[1]

Hope this helps?

document.getElementById("guide-button").onclick = function() {  
  myFunction() 
}; 
function myFunction() {
  var x = document.getElementById("guide");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y; display:none;" position="left" swipe-open="" opened="" persistent="">

<yt-icon-button id="guide-button" toggleable="true" class="style-scope ytd-masthead"><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Guide" aria-pressed="true">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions