CSS reference - Bifrost

Expand

React <SlideDown> component

Animate height

Animating height is tricky because CSS can't transition to keyword auto.

The .bf-expand and .bf-expand-closed classes utilise a css trick to animate height involving css grid and two wrapping elements.

HTML

<div class="bf-expand">
  <div>Expanded content</div>
</div>
<div class="bf-expand bf-expand-closed">
  <div>Collapsed content</div>
</div>

Together with a .bf-button-expand button that toggles the .bf-expand-closed class you can make something like this:

"I really wish I had my hammer."
"Hammer?"
"Quite unique. It was made from this special metal from the heart of a dying star. And when I spun it really, really fast it gave me the ability to fly."
"You rode a hammer?"
"No, I didn't ride the hammer."
"The hammer rode you on your back?"
"No. I used to spin it really fast, and it would pull me off the..."
"Oh, my God. The hammer pulled you off?"
"The ground. It would pull me off the ground, up into the air, and I would fly. Every time I threw it, it would always come back to me."
"Sounds like you had a pretty special and intimate relationship with this hammer and that losing it was almost comparable to losing a loved one."
"That's a nice way of putting it.

Padding

Caveat; this technique does not work well with padding on the immediate child element.

Avoid padding on the child element of .bf-expand

HTML

<div class="bf-expand">
  <div style="padding: 12px">Expanded content</div>
</div>

Instead apply padding to a separate element

HTML

<div class="bf-expand">
  <div>
    <div style="padding: 12px">Expanded content</div>
  </div>
</div>

Overflow hidden

The .bf-expand class applies overflow: hidden in order to hide content while transitioning between open/closed. This may have side-effects you don't want on an expanded section (like a select dropdown or hover tooltip getting clipped).

This can be avoided by applying the .bf-expand-expanded class when the content has expanded (after transition end when opening).