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.

<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:

Padding

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

Avoid padding on the child element of .bf-expand

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

Instead apply padding to a separate element

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

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-page-padding bfl-grid">
  <label><input type="checkbox" checked /> expanded</label>

  <div class="bf-expand">
    <div>
      <p class="bf-p">
        "I really wish I had my hammer."
        <br />
        "Hammer?"
        <br />
        "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."
        <br />
        "You rode a hammer?"
        <br />
        "No, I didn't ride the hammer."
        <br />
        "The hammer rode you on your back?"
        <br />
        "No. I used to spin it really fast, and it would pull me off the..."
        <br />
        "Oh, my God. The hammer pulled you off?"
        <br />
        "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."
        <br />
        "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."
        <br />
        "That's a nice way of putting it.
      </p>
    </div>
  </div>

  <script>
    const checkbox = document.querySelector('input[type="checkbox"]');
    const content = document.querySelector(".bf-expand");
    checkbox.addEventListener("change", () => {
      content.classList.toggle("bf-expand-closed");
    });
  </script>
</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).