How to open Bootstrap v5 Offcanvas using switches? - html

Question

I want to open the Bootstrap V5 Offcanvas using Bootstrap switches
the trick is simple when the input field is checked the Offcanvas should be opened and when Offcanvas is closed the checked should be removed.
My Code :
<!-- I want to Use checkbox switches to open the offcanvas -->
<div class="form-check form-switch">
<input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
references :
https://getbootstrap.com/docs/5.0/forms/checks-radios/
https://getbootstrap.com/docs/5.0/components/offcanvas/

Answer 1

You can do something like this..
var toggle = document.getElementById("offcanvas-toggler")
var offcanvas = new bootstrap.Offcanvas(document.getElementById("offcanvasExample"), {backdrop: false})
toggle.addEventListener("change", function(){
toggle.checked ? offcanvas.show() : offcanvas.hide()
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css">
<!-- I want to Use checkbox switches to open the offcanvas -->
<div class="form-check form-switch">
<input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
Demo