Add horizontal collapse support

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 40be4d918add473357851dcd32b3b17f54afae27..a261f2ddc5d8d83055c83c8141df7de5bcf26222 100644 (file)
--- 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 319a719b918c1993b1396354be2592fceaad2482..293d238b970b46056fac2a0bde7c02e7e0443427 100644 (file)
--- 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 020237cfd509aaee21193f23d0ec69aea79974f9..2c94415084ef9998d375c334bcc3eac45da7b3b2 100644 (file)
--- 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.