Created by: MartijnCuppens
Inspired by Eric, I added a little accordion jump in #32013. Turns out @XhmikosR didn't like that, so he opened #32250 (closed).
Method is similar to the technique we use for the input/button groups. Because we now have an overlap, I needed a non-transparent color to prevent the colors from mixing.
I still notice a little jump in Chrome (rendering issue in Chrome, macOS?), but I'm afraid that's out of our jurisdiction (tried some hacks with will-change
, but without result).
There's also still a little jump on the last item, but we also add an additional border. We could "fix" this by adjusting the bottom padding, but this could become problematic when the paddings are removed. Also, because in reality the accordion content won't always be exactly the same, chances are the total accordion height will vary when sections are collapsed.
Closes #32251 which closes #32250 (closed)
Preview: https://deploy-preview-32278--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/#example