Docs: add Usage section with JavaScript guide for Accordion component

Author: TommasoAllegretti

site/content/docs/5.3/components/accordion.md

@@ -167,3 +167,88 @@ As part of Bootstrap's evolving CSS variables approach, accordions now use local
 ### Sass variables
 
 {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
+
+## Usage
+
+The accordion plugin utilizes a few classes to handle the heavy lifting:
+
+- `.collapse` hides the content
+- `.collapse.show` shows the content
+- `.collapsing` is added when the transition starts, and removed when it finishes
+
+These classes can be found in `_transitions.scss`.
+
+### Via data attributes
+
+Just add `data-bs-toggle="collapse"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`.
+
+To add accordion group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`.
+
+### Via JavaScript
+
+Enable manually with:
+
+```js
+const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
+const collapseList = [...accordionCollapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
+```
+
+### Options
+
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+`parent` | selector, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
+`toggle` | boolean | `true` | Toggles the collapsible element on invocation. |
+{{< /bs-table >}}
+
+### Methods
+
+{{< callout danger >}}
+{{< partial "callouts/danger-async-methods.md" >}}
+{{< /callout >}}
+
+Activates your content as a collapsible element. Accepts an optional options `object`.
+
+You can create a collapse instance with the constructor, for example:
+
+```js
+const bsCollapse = new bootstrap.Collapse('#myCollapse', {
+  toggle: false
+})
+```
+
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)`. |
+| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). |
+| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). |
+| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
+{{< /bs-table >}}
+
+### Events
+
+Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. |
+| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
+| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
+
+```js
+const myCollapsible = document.getElementById('myCollapsible')
+myCollapsible.addEventListener('hidden.bs.collapse', event => {
+  // do something...
+})
+```