diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-05-24 20:50:03 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-06-02 06:14:35 +0300 |
| commit | 4444f090b6c6eda52a232fd75e5f3a336a171404 (patch) | |
| tree | e1e3a1bd24945a0bda57488f0cca3b97b0b6bd3f | |
| parent | 5968ef23ca544f138c204d4e1cdd86a8f9cca247 (diff) | |
Add horizontal collapse support
| -rw-r--r-- | scss/_transitions.scss | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/4.6/components/collapse.md | 23 |
3 files changed, 30 insertions, 0 deletions
diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 40be4d918a..a261f2ddc5 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -17,4 +17,10 @@ height: 0; overflow: hidden; @include transition($transition-collapse); + + &.width { + width: 0; + height: auto; + @include transition($transition-collapse-width); + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 319a719b91..293d238b97 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -257,6 +257,7 @@ $caret-spacing: $caret-width * .85 !default; $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; +$transition-collapse-width: width .35s ease !default; $embed-responsive-aspect-ratios: () !default; $embed-responsive-aspect-ratios: join( diff --git a/site/content/docs/4.6/components/collapse.md b/site/content/docs/4.6/components/collapse.md index 020237cfd5..2c94415084 100644 --- a/site/content/docs/4.6/components/collapse.md +++ b/site/content/docs/4.6/components/collapse.md @@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-target` attribute. While n </div> {{< /example >}} +## Horizontal + +The collapse plugin also supports horizontal collapsing. Add the `.width` 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> + Toggle width collapse + </button> +</p> +<div style="min-height: 120px;"> + <div class="collapse width" id="collapseWidthExample"> + <div class="card card-body" style="width: 320px;"> + 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 JQuery selector in its `href` or `data-target` attribute. |