2

I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code bellow:

const left = document.querySelector("left");
const right = document.querySelector("right");
const button = document.querySelector("button");
button.addEventListener("click", close);
const x = true;

function close() {
  document.getElementById("left").style.width = "0";
  document.getElementById("right").style.width = "100%";
  x = false;
}

function open() {
  document.getElementById("left").style.width = "15%";
  document.getElementById("right").style.width = "85%";
  x = true;
}

function sideNav() {
  if (x = true) {
    w3_close();
  } else {
    open();
  }

}
<!DOCTYPE html>
<html>

<head>
  <title>WebPage</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="webPage.css">
  <meta charset="utf-8">
  <script src="https://kit.fontawesome.com/62ea397d3a.js" crossorigin="annonymous"></script>
</head>

<body>
  <div class="header"></div>
  <div id="left">
    <button class="button">Click Me!</button>
  </div>

  <div id="right">
    <p></p>
  </div>
</body>

</html>
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
Carlos Garcia prieto
  • 21
  • 1

1 Answers1

0

Click on the ☰ symbol to open the sidebar (overlays some of the page content). function w3_open () { document.getElementById("mySidebar").style.display = "block"; } function w3_close () {