Update collapse.md

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);
+  }
 }

scss/_variables.scss

@@ -378,7 +378,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;
 
 // stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios

site/assets/scss/_sidebar.scss

@@ -34,6 +34,7 @@
     margin-top: .125rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
+    visibility: visible;
 
     &:hover,
     &:focus {

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="true" aria-controls="collapseHorizontalExample">
+    Link with href
+  </a>
+  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseHorizontalExample" aria-expanded="true" 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.