From b1aa75e07aacf4193c1444fedb363d89a63c82f6 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 16 Sep 2020 17:13:37 -0700
Subject: [PATCH 1/2] Try horizontal collapse, but not working right now

---
 scss/_transitions.scss                       | 14 ++++++++++++++
 scss/_variables.scss                         |  3 ++-
 site/assets/scss/_sidebar.scss               |  1 +
 site/content/docs/5.0/components/collapse.md | 18 ++++++++++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)

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.

From e19bad03ab520d350deec62eacb8e552c8259a47 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 1 Oct 2020 16:39:14 +0300
Subject: [PATCH 2/2] Update collapse.md

---
 site/content/docs/5.0/components/collapse.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index e1813ef51..2435a8f03 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -44,10 +44,10 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 
 {{< example >}}
 <p>
-  <a class="btn btn-primary" data-toggle="collapse" href="#collapseHorizontalExample" role="button" aria-expanded="false" aria-controls="collapseHorizontalExample">
+  <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="false" aria-controls="collapseHorizontalExample">
+  <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>