CSS transition from specific height to "auto"

2024-03-14

Tags:

CSS
transition
reveal content

With CSS grid it's easy to transition from height 0 to "auto". But this method needs to be adapted to transition from a specific height to "auto".

There are certain patterns I keep using on different websites. One of those is that some content is hidden and can be shown when clicking a button. Of course the content should not only just appear then but a nice "slide down" transition should be used.

I found out that it's possible to transition from height 0 to "auto" using CSS grid a while ago. Before learning about that, I used JavaScript to find the maximum height of the "hidden" content and set this as the value for the CSS max-height property. A workaround for not having to use JavaScript would be to set the max-height to a value which is definitely larger than the content. The downside of this is, that the timing of the transition can't be set properly. But all this isn't needed anymore, CSS grid for the win.

So here is how the height transition with CSS grid works:

<button>Show more</button>

<div class="expander-wrapper">
    <div class="inner">
        Lorem Ipsum dolor sit amet ...
    </div>
</div>

.expander-wrapper{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
    overflow: hidden;
}

.expander-wrapper .inner{
    min-height: 0;
}

.expander-wrapper.open{
    grid-template-rows: 1fr;
}

const btn = document.querySelector("button");
btn.addEventListener("click", (e) => {
    document.querySelector(".expander-wrapper").classList.toggle("open");
});

Recently I needed to do something similar which turned out doesn't work with the approach mentioned before: I wanted to initially only show a part of a quite long text and have a button to show it completely. The difference to the example above is that the initial value for grid-template-rows would be set in em and not be 0fr.

.expander-wrapper{
    display: grid;
    grid-template-rows: 5em;
    transition: grid-template-rows 0.4s ease-out;
    overflow: hidden;
}

When doing so the transition no longer works. It seems like the transition doesn't work when different units are used (even using just 0 instead of 0fr doesn't work).

The solution I found for this to work is to use two rows. The first row has the "minimum height" and the second row 0fr — which then can be transitioned to 1fr. The inner element is set to span over both rows.

.expander-wrapper{
    display: grid;
    grid-template-rows: 5em 0fr;
    transition: grid-template-rows 0.4s ease-out;
    overflow: hidden;
}

.expander-wrapper .inner{
    min-height: 0;
    grid-row: 1 / -1;
}

.expander-wrapper.open{
    grid-template-rows: 5em 1fr;
}

Demo:

VIEWS OF NATURE:
OR CONTEMPLATIONS ON THE SUBLIME PHENOMENA OF CREATION;
WITH SCIENTIFIC ILLUSTRATIONS.
BY
ALEXANDER VON HUMBOLDT.

With some diffidence, I here present to the public a series of papers which originated in the presence of the noblest objects of nature,—on the Ocean,—in the forests of the Orinoco,—in the Savannahs of Venezuela,—and in the solitudes of the Peruvian and Mexican Mountains. Several detached fragments, written on the spot, have since been wrought into a whole. A survey of nature at large,—proofs of the co-operation of forces,—and a renewal of the enjoyment which the immediate aspect of the tropical countries affords to the susceptible beholder,—are the objects at which I aim. Each Essay was designed to be complete in itself; and one and the same tendency pervades the whole. This æsthetic mode of treating subjects of Natural History is fraught with great difficulties in the execution, notwithstanding the marvellous vigour and flexibility of my native language. The wonderful luxuriance of nature presents an accumulation of separate images, and accumulation disturbs the harmony and effect of a picture. When the feelings and the imagination are excited, the style is apt to stray into poetical prose. But these ideas require no amplification here, for the following pages afford but too abundant examples of such deviations and of such want of unity.

Notwithstanding these defects, which I can more easily xperceive than amend, let me hope that these “Views” may afford the reader, at least some portion of that enjoyment which a sensitive mind receives from the immediate contemplation of nature. As this enjoyment is heightened by an insight into the connection of the occult forces, I have subjoined to each treatise scientific illustrations and additions.

Everywhere the reader’s attention is directed to the perpetual influence which physical nature exercises on the moral condition and on the destiny of man. It is to minds oppressed with care that these pages are especially consecrated. He who has escaped from the stormy waves of life will joyfully follow me into the depths of the forests, over the boundless steppes and prairies, and to the lofty summits of the Andes. To him are addressed the words of the chorus who preside over the destinies of mankind:

On the mountains is freedom! the breath of decay
Never sullies the fresh flowing air;
Oh! nature is perfect wherever we stray;
’Tis man that deforms it with care.

Note: In many use cases the details element would be the perfect fit for something like this. Unfortunately it's not possible to transition the opening of the details element without using JavaScript. In case you are interested how to do it with JavaScript, have a look here.