fix live toast demo (#37590)

* fix live toast demo

* Fix live toast demo

* Update snippets.js

* Update toasts.md

* Update snippets.js

* Code review comments addressed

Co-authored-by: XhmikosR <[email protected]>
Co-authored-by: Mark Otto <[email protected]>

2 files changed, 11 insertions, 11 deletions

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index a69b4bf64..95fce2da8 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -19,7 +19,7 @@
   // --------
   // Tooltips
   // --------
-  // Instantiate all tooltips in a docs or StackBlitz page
+  // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip)
@@ -28,7 +28,7 @@
   // --------
   // Popovers
   // --------
-  // Instantiate all popovers in a docs or StackBlitz page
+  // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="popover"]')
     .forEach(popover => {
       new bootstrap.Popover(popover)
@@ -49,7 +49,7 @@
     })
   }
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
       const toast = new bootstrap.Toast(toastNode, {
@@ -59,14 +59,14 @@
       toast.show()
     })
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
+
   if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      const toast = new bootstrap.Toast(toastLiveExample)
-
-      toast.show()
+      toastBootstrap.show()
     })
   }
 
@@ -98,7 +98,7 @@
   // --------
   // Carousels
   // --------
-  // Instantiate all non-autoplaying carousels in a docs or StackBlitz page
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
   document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
     .forEach(carousel => {
       bootstrap.Carousel.getOrCreateInstance(carousel)
diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index b7a84dc6e..d3454633a 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -90,11 +90,11 @@ We use the following JavaScript to trigger our live toast demo:
 ```js
 const toastTrigger = document.getElementById('liveToastBtn')
 const toastLiveExample = document.getElementById('liveToast')
+
 if (toastTrigger) {
+  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
   toastTrigger.addEventListener('click', () => {
-    const toast = new bootstrap.Toast(toastLiveExample)
-
-    toast.show()
+    toastBootstrap.show()
   })
 }
 ```