diff options
Diffstat (limited to 'site/content/docs/5.0/components/collapse.md')
| -rw-r--r-- | site/content/docs/5.0/components/collapse.md | 25 |
1 files changed, 24 insertions, 1 deletions
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index ac84ca964..5d413ad75 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil </div> {{< /example >}} +## Horizontal + +The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). + +{{< callout info >}} +Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** +{{< /callout >}} + +{{< example >}} +<p> + <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> + Toggle width collapse + </button> +</p> +<div style="min-height: 120px;"> + <div class="collapse collapse-horizontal" id="collapseWidthExample"> + <div class="card card-body" style="width: 300px;"> + This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. + </div> + </div> +</div> +{{< /example >}} + ## Multiple targets A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. @@ -103,7 +126,7 @@ These classes can be found in `_transitions.scss`. 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-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the demo to see this in action. +To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the [accordion page]({{< docsref "/components/accordion" >}}) for more information. ### Via JavaScript |