Trying to close the offcanvas with the close button inside the offcanvas. Right now, I can only close it with the button I opened it with. What did I do wrong? See attached code.

(function mainScript() {
  "use strict";

  const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

    <div id="navbar" >
      <div id="nav-toggler-wrapper">
        <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span >Menu</span>
        </button>
      </div>
    </div>
    

  <div id="sidenav" >
    <div >
      <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span >Close</span>
      </button>
    </div>
  </div>

CodePudding user response：

You need to use querySelectorAll instead of querySelector, because you try to select more then one element and use forEach for apply eventListner to each one like:

(function mainScript() {
  "use strict";

  const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle.forEach(el => {
    el.addEventListener("click", function() {
      offcanvasCollapse.classList.toggle("open");
    });
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

<div id="navbar" >
  <div id="nav-toggler-wrapper">
    <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span >Menu</span>
        </button>
  </div>
</div>


<div id="sidenav" >
  <div >
    <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span >Close</span>
      </button>
  </div>
</div>

CodePudding user response：

Only JavaScript has been edited

(function mainScript() {
  "use strict";

  const offcanvasToggle1 = document.querySelector('[data-bs-toggle="offcanvas"]');
  const offcanvasToggle2 = document.querySelector('[data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle1.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
  offcanvasToggle2.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

    <div id="navbar" >
      <div id="nav-toggler-wrapper">
        <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span >Menu</span>
        </button>
      </div>
    </div>
    

  <div id="sidenav" >
    <div >
      <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span >Close</span>
      </button>
    </div>
  </div>