diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 3d1db3e9d..bad659c26 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -7,13 +7,27 @@
 }
 
 .collapse {
+  visibility: hidden;
+
+  &.show {
+    // display: block;
+    visibility: visible;
+  }
+
   &:not(.show) {
     display: none;
   }
 }
 
 .collapsing {
+  position: relative;
   height: 0;
   overflow: hidden;
   @include transition($transition-collapse);
+
+  &.collapse-horizontal {
+    width: 0;
+    height: auto !important; // stylelint-disable-line declaration-no-important
+    @include transition($transition-horizontal-collapse);
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index bdf2d62a4..145a6b401 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -363,7 +363,8 @@ $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:         height .35s ease, visibility .35s ease !default;
+$transition-horizontal-collapse: width .35s ease, visibility .35s ease !default;
 
 // scss-docs-start embed-responsive-aspect-ratios
 $embed-responsive-aspect-ratios: (
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 8f7db2e57..2fc349c4d 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -19,6 +19,7 @@
     margin-top: .125rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
+    visibility: visible;
 
     &:hover,
     &:focus {
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index 349d26da5..e1813ef51 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -40,6 +40,24 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 </div>
 {{< /example >}}
 
+## Horizontal
+
+{{< example >}}
+<p>
+  <a class="btn btn-primary" data-toggle="collapse" href="#collapseHorizontalExample" role="button" aria-expanded="false" aria-controls="collapseHorizontalExample">
+    Link with href
+  </a>
+  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseHorizontalExample" aria-expanded="false" aria-controls="collapseHorizontalExample">
+    Button with data-target
+  </button>
+</p>
+<div class="collapse show collapse-horizontal" id="collapseHorizontalExample">
+  <div style="width: 400px;">
+    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
+  </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-target` attribute.