As you can see in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample1" aria-controls="offcanvasExample1">
Button with offcanvas & data-bs-target 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample2" aria-controls="offcanvasExample2">
Button with offcanvas & data-bs-target 2
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#offcanvasExample1" aria-controls="offcanvas-sides">
Button with collapse & data-bs-target 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#offcanvasExample2" aria-controls="offcanvas-sides">
Button with collapse & data-bs-target 2
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".offcanvas-sides" aria-controls="offcanvas-sides">
Button with data-bs-target 1 & 2
</button>
<div class="offcanvas offcanvas-start offcanvas-sides" tabindex="-1" id="offcanvasExample1" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel1">Offcanvas 1</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target="#offcanvasExample1">Collapse This</button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target="#offcanvasExample2">Collapse Other</button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target=".offcanvas-sides">Collapse Both</button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder ON THE LEFT. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>
<div class="offcanvas offcanvas-end offcanvas-sides" tabindex="-1" id="offcanvasExample2" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel2">Offcanvas 2</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target="#offcanvasExample1">Collapse Other</button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target="#offcanvasExample2">Collapse This</button>
<button type="button" class="btn text-reset" data-bs-toggle="collapse" data-bs-target=".offcanvas-sides">Collapse Both</button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder ON THE RIGHT. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
</div>
</div>This is a example extracted from the official documentation from Bootstrap 5. It uses two offcanvas components, "sliding-in" from each side.
Offcanvas elements can be triggered with data-bs-toggle="offcanvas", which is similar to a modal control, so you can trigger only one, and blocks the rest of the frame. But it does trigger both "slide in" and "slide out" animations.
The other way to trigger multiple offcanvas it is to use data-bs-toggle="collapse". This basically triggers multiple show/hide events, and apparently it does use show/hide animations in other elements like in accordions.
Yet when using it on an offcanvas element, which are bootstrap components, the "slide in" animation is recogniced and does work, but the "slide out" is not, and it instantly hides.
While there are many questions explaining about data-toggle, the only answer about possible inconsistencies i've found is this, and basically says to read and debug the bootstrap code myself. I don't know if this is a bug or expected behavious, but it is, at least, inconsistent.
I'm sorry but I'm pants at Javascript and only able of basic jQuery usage. Its impossible for me to try to FIX the js library, or even make sense of it.
Is there a way to use jQuery to manually trigger the animations, so it at least APPEARS consistent?
Or it is impossible, and should somehow disable both animations, and how?
Yes, bootstrap complains about how how these should be only one offcanvas, even if it is documented, and it does work in a flacky way. I don't want a full fix, just how to make it "look" fixed.