Add .show class to offcanvas example, and disable it's normal behavior in our JS

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 55e8969802c37e464d62ca1be7d478f21d967f78..20d917990e1abb2fbd81bdca3110c07085d78090 100644 (file)
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -131,4 +131,12 @@
       modalBodyInput.value = recipient
     })
   }
+
+  // Offcanvas demo
+  const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas')
+  if (myOffcanvas) {
+    myOffcanvas.addEventListener('show.bs.offcanvas', event => {
+      event.preventDefault()
+    }, false)
+  }
 })()

diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 10d184ed573f6fbf0242c226617f6e4fa218af67..5df9aecc1e247d446b20a96e262b2da57cf45f14 100644 (file)
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -28,7 +28,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
 {{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>