Bootstrap 4 accordion in sidebar with stretched active collapse

Question

I'm trying to build a sidebar that contains a Bootstrap 4 accordion. I would like the collapse panes to stretch when activated so they fill all available space in the sidebar (the collapse panes will have to get scrollbars if the content is too large to fit).

I tried to make the wrapping #accordion a d-flex flex-column but that seems not to be enough. The div around #accordion (the sidebar) and the #accordion have the h-100 class so they stretch all the way down.

I'm thinking the cards, wrapping the headers and collapse panes, are the problem. But not sure.

The accordion markup starts like:

<div id="accordion" class="d-flex flex-column align-items-stretch h-100">

This jsFiddle is a shortened example of what I have.

Answer 1

There is no way to do this w/o JavaScript or some extra CSS. The problem is that the active collapse div is inside the card, but the parent card of the active collapse div needs to also grow to fill the height.

A workaround is to collapse both the parent card, and the div inside the card. This can be done by using the same class for each card and its' collapsible div. For example, add the "collapseOne" class to the card and inner div. Then the button that toggles the collapse targets both (data-target=".collapseOne").

https://www.codeply.com/go/ye633Zj3Yy

<div class="card collapse show collapseOne border-bottom-0" data-parent="#accordion">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </button>
              </h5>
        </div>
        <div id="collapseOne" class="collapse show fade collapseOne" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Content...
            </div>
        </div>
</div>

Then a little extra flexbox CSS to make the "active" card fill height, but shrink when it's not active...

.card {
    flex: 1 1 100%;
}

.collapse {
    flex: 0 0 auto;
}

.collapse.show {
    flex: 1 0 auto;
}

Demo