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" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>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" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>