Try horizontal collapse, but not working right now

[mdo]

Trying to implement https://www.codeply.com/go/UiteY92ke8/bootstrap-4-horizontal-collapse, but hitting my head against a wall for too long. Hoping someone on @twbs/css-review can point out the error of my ways.

Preview: https://deploy-preview-31681--twbs-bootstrap.netlify.app/docs/5.0/components/collapse/#horizontal

[ffoodd]

Isn't some JavaScript involved here? I see you only changed the Sass part.

[mdo]

Isn't some JavaScript involved here? I see you only changed the Sass part.

Most of the guides I've seen online don't change any JS, just CSS. Not quite sure if I'm missing some changed JS in that linked example, but you could very well be right.

[XhmikosR]

The demo don't seem to use any JS apart from the core classes. Not sure if we have changed those in v5, since the demo is using v4.1.3. I also tried the demo with v5.0.0-alpha1 and seems to work fine, so I'd say something is missing in the CSS or markup?

[XhmikosR]

BTW this whole thing is transitioning properties that are not performant, like width and height.

Here is a Codepen with v5.0.0-alpha2: https://codepen.io/XhmikosR/pen/wvGLgwv?editors=1100

EDIT: this change breaks all current collapse; see the docs navbar which doesn't show, or the docs sidebar which doesn't scroll vertically

[mdo]

I give up lol

[alpadev]

I give up lol

Nooo.. Don't!😯Let's collaborate then.

I think you don't need that visibility stuff. There are two things that are involved.

First the collapse module checks for a width class on the collapse element. 🤯

Second magic thing is there is some hardcoded width in that demo. Not sure if it's possible to make this responsive without JS.

Also I'm not sure why that demo got that visibility stuff. My guess is that you can't transition display but visibility. For what reason? I don't know. If I remove that visibility stuff the demo works the same as for me.

This leaves us with something like that: https://codepen.io/-alpa-/pen/yLgObPM

Edit: I have no use case for this, but if you really want that feature I will try to help you here. If not maybe you should close #17496 as well.