I have a little problem with open one offcanvas from previous canvas. Generally I have canvas like this using bootstrap 5:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#secondoffcanvas" aria-controls="offcanvasBottom" data-bs-dismiss="offcanvas">Open second offcanvas</button>
</div>
</div>
second offcanvas:
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="secondoffcanvas" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
second content
</div>
</div>
My scenario:
- Click to open first offcanvas
- Click on the button in canvas Resulst:
- first canvas hide
- second canvas open
I have a little problem with open one offcanvas from previous canvas. Generally I have canvas like this using bootstrap 5:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#secondoffcanvas" aria-controls="offcanvasBottom" data-bs-dismiss="offcanvas">Open second offcanvas</button>
</div>
</div>
second offcanvas:
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="secondoffcanvas" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
second content
</div>
</div>
My scenario:
- Click to open first offcanvas
- Click on the button in canvas Resulst:
- first canvas hide
- second canvas open
4 Answers
Reset to default 4Read "how it works"...
"Similar to modals, only one offcanvas can be shown at a time."
However, you can open one from the other. Programmatically show the 2nd when the 1st is hidden...
var offcanvasBottom = document.getElementById('offcanvasBottom')
var secondoffcanvas = document.getElementById('secondoffcanvas')
offcanvasBottom.addEventListener('hidden.bs.offcanvas', function () {
var bsOffcanvas2 = new bootstrap.Offcanvas(secondoffcanvas)
bsOffcanvas2.show()
})
Demo
Thanks You #Zim. This resolve my issue. I have one question jet. What You think about identify if event was triggered from button on the offcanvas and no triggered from other place? Because now if You click in othe place second canvas is open too
I am facing the same issue when I show the project detail information, try this code will solve your issue:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Multi-level Offcanvas Demo</title>
</head>
<body>
<div class="offcanvas offcanvas-end" tabindex="-1" id="firstOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Project history</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>project histories</p>
<button type="button" class="btn btn-primary" id="openSecondOffcanvas">Project Detail</button>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="secondOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Project Detail</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>This is the project detail.</p>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#firstOffcanvas">Open Project Histories</button>
<script src="https://cdn.jsdelivr/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
let openSecondOffcanvasButton = document.getElementById('openSecondOffcanvas');
openSecondOffcanvasButton.addEventListener('click', function () {
let firstOffcanvas = new bootstrap.Offcanvas(document.getElementById('firstOffcanvas'));
let secondOffcanvas = new bootstrap.Offcanvas(document.getElementById('secondOffcanvas'));
firstOffcanvas.hide();
secondOffcanvas.show();
});
</script>
</body>
</html>try this
function toggle() {
document.getElementById('offcanvas').classList.toggle('show');
}