Move from warning to own sectiongs/docs-add-scrollspy-info

1 files changed, 14 insertions, 23 deletions

diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md
index 23afee9423..0b8395b8f5 100644
--- a/site/content/docs/5.2/components/scrollspy.md
+++ b/site/content/docs/5.2/components/scrollspy.md
@@ -16,29 +16,6 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
 
 - As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
 
-
-{{< callout warning >}}
-**Non-visible elements**
-
-Target elements that aren’t visible will be ignored, and their corresponding nav items will not receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
-
-<details>
-  <summary class="text-muted">Show tab example</summary>
-
-```js
-document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
-  el.addEventListener('shown.bs.tab', () => {
-    const target = el.getAttribute('data-bs-target')
-    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
-    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
-  })
-})
-```
-</details>
-
-{{< /callout >}}
-
-
 ## Examples
 
 ### Navbar
@@ -349,6 +326,20 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
 </div>
 ```
 
+## Non-visible elements
+
+Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
+
+```js
+document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+  el.addEventListener('shown.bs.tab', () => {
+    const target = el.getAttribute('data-bs-target')
+    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
+    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
+  })
+})
+```
+
 ## Usage
 
 ### Via data attributes