<button id="toggle">
    Toggle Content
</button>

<div id="content">
    <div class="inside"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quibusdam corrupti eos quos perspiciatis?</div>
</div>
body {
    inline-size: 20rem;
    margin-inline: auto;
}

#content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 1s;
    overflow: hidden;
}
#content .inside {
    min-height: 0;
}
#content.expanded {
    background: red;
    grid-template-rows: 1fr;
}

toggle.onclick = () => {
    content.classList.toggle("expanded");
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.