I've got a Bootstrap list group to which I'm applying a collapse effect. It was working fine except for a stutter in the animation:
Apparently this is due to the padding on the element; CSS animates the height change to/from 0, but then deals with the remaining padding all at once.
Sure enough, if I wrap the item in a div, it animates smoothly:
Now the problem is a double border around the collapsed item. Bootstrap's rule erasing the top border targets .list-group-item + .list-group-item so the extra div is getting in the way. I tried to hide the border in the same way:
/* remove border on item following collapse */
.list-group div.collapse + .list-group-item {
border-top-width: 0;
}
/* remove border on item inside collapse (I know there will always be another item above it) */
.list-group div.collapse > .list-group-item {
border-top-width: 0;
}
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
<div class="collapse" id="collapser">
<div class="list-group-item">Here's the collapsing content</div>
</div>
<span class="list-group-item list-group-item-action">Here's another item</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
This is pretty close to perfect, except the double border appears during the animation. I'm not sure why, since the border width never changes depending on whether the item is shown or not. How can I get rid of this border once and for all?
