Offcanvas not showing with class .show

Hi all,

I’m trying to use the offcanvas opened by default but adding the class .show is not working (it is closed as default). Using these versions: https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js

<div class="offcanvas offcanvas-start show" data-bs-scroll="true" tabindex="-1" id="offcanvas" data-bs-backdrop="false" aria-labelledby="offcanvasNavbarLabel" style="width:300px;">
	<div class="offcanvas-header">
		<a href="/">
			<img src="assets/logo.png" alt="Logo">
		</a>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
	</div>
</div>

Adding on the style “visibility:visible;” starts showing by default but the buttons for dismiss and toggle seems not working on the first click.

Using it inside the main navbar (exactly as the example provided on the docs).

Am I missing something? Could you help, please?

• Windows 10
• Edge latest version

[recursivecodes]

Thanks!

[GeoSot]

new bootstrap.Offcanvas(document.getElementById(‘offcanvasTop’)).hide() Try:

bootstrap.Offcanvas.getOrCreateInstance('#offcanvaTops').hide()

Your example works on codepen but not on my environment.

I managed to find windows 10 with Edge latest version. Unfortunately, I successfully opened codepen example, plus a demo of the same code , as an html file. So I do not know how to help you, without replicating it