v4 without jquery: updated button, carousel, collapse docs (#27173)

diff --git a/site/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md
index 118679752a8c1b6795a6271c88156ad0fbe436be..f100192042fc0194846ba4285b2f2e7ce7882025 100644 (file)
--- a/site/docs/4.3/components/buttons.md
+++ b/site/docs/4.3/components/buttons.md
@@ -157,7 +157,24 @@ Note that pre-checked buttons require you to manually add the `.active` class to
 
 ### Methods
 
-| Method | Description |
-| --- | --- |
-| `$().button('toggle')` | Toggles push state. Gives the button the appearance that it has been activated. |
-| `$().button('dispose')` | Destroys an element's button. |
+You can create a button instance with the button constructor, for example:
+
+{% highlight js %}
+var button = document.getElementById('myButton')
+var bsButton = new bootstrap.Button(button)
+{% endhighlight %}
+
+| Method    | Description                                                                     |
+| --------- | ------------------------------------------------------------------------------- |
+| `toggle`  | Toggles push state. Gives the button the appearance that it has been activated. |
+| `dispose` | Destroys an element's button.                                                   |
+
+For example, to toggle all buttons
+
+{% highlight js %}
+var buttons = document.querySelectorAll('.btn')
+buttons.forEach(function (button) {
+  var button = new bootstrap.Button(button)
+  button.toggle()
+})
+{% endhighlight %}

diff --git a/site/docs/4.3/components/carousel.md b/site/docs/4.3/components/carousel.md
index 455e2d9e5162d841dfb537a857899ec960dd4650..36cea4f00b6407ea3d5ee55b92f7836ae1fd214f 100644 (file)
--- a/site/docs/4.3/components/carousel.md
+++ b/site/docs/4.3/components/carousel.md
@@ -228,7 +228,8 @@ The `data-ride="carousel"` attribute is used to mark a carousel as animating sta
 Call carousel manually with:
 
 {% highlight js %}
-$('.carousel').carousel()
+var myCarousel = document.querySelector('#myCarousel')
+var carousel = new bootstrap.Carousel(myCarousel)
 {% endhighlight %}
 
 ### Options
@@ -265,8 +266,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
     </tr>
     <tr>
-      <td>ride</td>
-      <td>string</td>
+      <td>slide</td>
+      <td>string | boolean</td>
       <td>false</td>
       <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
     </tr>
@@ -289,39 +290,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 {% include callout-danger-async-methods.md %}
 
-#### `.carousel(options)`
-
-Initializes the carousel with an optional options `object` and starts cycling through items.
+You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
 
 {% highlight js %}
-$('.carousel').carousel({
-  interval: 2000
+var myCarousel = document.querySelector('#myCarousel')
+var carousel = new bootstrap.Carousel(myCarousel, {
+  interval: 2000,
+  wrap: false
 })
 {% endhighlight %}
 
-#### `.carousel('cycle')`
-
-Cycles through the carousel items from left to right.
-
-#### `.carousel('pause')`
-
-Stops the carousel from cycling through items.
-
-#### `.carousel(number)`
-
-Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
-
-#### `.carousel('prev')`
-
-Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
-
-#### `.carousel('next')`
-
-Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
-
-#### `.carousel('dispose')`
 
-Destroys an element's carousel.
+| Method | Description |
+| --- | --- |
+| `cycle` | Cycles through the carousel items from left to right. |
+| `pause` | Stops the carousel from cycling through items. |
+| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
+| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
+| `nextWhenVisible` | Only go to the next slide when the page, carousel and the carousel parent is visible. |
+| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
+| `dispose` | Destroys an element's carousel. |
 
 ### Events
 

diff --git a/site/docs/4.3/components/collapse.md b/site/docs/4.3/components/collapse.md
index 893b8b66430314eb72ad56975f31e0cb9039c91b..10e32a657114447587df7a7ef221c83184a66bc3 100644 (file)
--- a/site/docs/4.3/components/collapse.md
+++ b/site/docs/4.3/components/collapse.md
@@ -187,31 +187,23 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 {% include callout-danger-async-methods.md %}
 
-#### `.collapse(options)`
-
 Activates your content as a collapsible element. Accepts an optional options `object`.
 
+You can create a collapse instance with the constructor, for example:
+
 {% highlight js %}
-$('#myCollapsible').collapse({
+var myCollapse = document.getElementById('myCollapse')
+var bsCollapse = new bootstrap.Collapse(myCollapse, {
   toggle: false
 })
 {% endhighlight %}
 
-#### `.collapse('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).
-
-#### `.collapse('show')`
-
-Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).
-
-#### `.collapse('hide')`
-
-Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).
-
-#### `.collapse('dispose')`
-
-Destroys an element's collapse.
+| Method | Description |
+| --- | --- |
+| `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). |
+| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).|
+| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).|
+| `dispose` | Destroys an element's collapse. |
 
 ### Events