Add horizontal collapse support

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 8831510dfd66486b52d6ebe6e6b07318b8dbf4be..22bd31f9b3979bd53456665d479e364fbbdda25f 100644 (file)
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -50,6 +50,7 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_COLLAPSE = 'collapse'
 const CLASS_NAME_COLLAPSING = 'collapsing'
 const CLASS_NAME_COLLAPSED = 'collapsed'
+const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
 
 const WIDTH = 'width'
 const HEIGHT = 'height'
@@ -266,7 +267,7 @@ class Collapse extends BaseComponent {
   }
 
   _getDimension() {
-    return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT
+    return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT
   }
 
   _getParent() {

diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index 11d8d52bf5d0f0ee703156cafefeedf9b96fbe1a..9bce3f0bb0f81723f6e1950a95157c3a59072c39 100644 (file)
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -225,7 +225,7 @@ describe('Collapse', () => {
     })
 
     it('should show a collapsed element on width', done => {
-      fixtureEl.innerHTML = '<div class="collapse width" style="width: 0px;"></div>'
+      fixtureEl.innerHTML = '<div class="collapse collapse-horizontal" style="width: 0px;"></div>'
 
       const collapseEl = fixtureEl.querySelector('div')
       const collapse = new Collapse(collapseEl, {

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 2905df45cd14bea9571999fbecb64732d9572d61..bfb26aa8ac7e5aac0f26b6ff181b381fea7b6c9d 100644 (file)
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -17,5 +17,11 @@
   height: 0;
   overflow: hidden;
   @include transition($transition-collapse);
+
+  &.collapse-horizontal {
+    width: 0;
+    height: auto;
+    @include transition($transition-collapse-width);
+  }
 }
 // scss-docs-end collapse-classes

diff --git a/scss/_variables.scss b/scss/_variables.scss
index aa4d4ff2fbd2c841b3287590cc39e4f890215253..7f93df4e342b697d75c03d84a6c0c0db87f1d08a 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -398,6 +398,7 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 // scss-docs-start collapse-transition
 $transition-collapse:         height .35s ease !default;
+$transition-collapse-width:   width .35s ease !default;
 // scss-docs-end collapse-transition
 
 // stylelint-disable function-disallowed-list

diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index ac84ca96491ae9eb95f9d5b4bdeac25e680ef5e6..3704fb636b163e012585b93574703e57f06152a7 100644 (file)
--- 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.