This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

A common development requirement is that we want to fold part of an element until it is needed. Some common frameworks, such as Bootstrap and JQuery, provide conversion effects. However, the CSS Transition gives us a lot of flexibility in the height of the transformation. Therefore, you don’t need to add another framework to your project.

Let’s take a look at how to use the CSS Transition to set the height property of the animation, the problems and solutions.

You can check out the results at 👉

The transition height

What we want to do is, when you click the See More button, it will increase the height of the element to show all the content of the article, and when you click it again, it will go back to its original appearance.

We will create a CSS class for this. When you click the See More button, this class is added to the

element using JavaScript.

First, we’ll add one to the HTML file

<article id="article">
  <h3>Use the CSS Transition to expand and collapse an element by changing its Height</h3>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis tempora iure accusamus rerum. Fuga porro unde, laboriosam soluta accusantium numquam quos adipisci commodi velit, expedita officia cum excepturi molestias.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>
</article>
<button id="seeMoreBtn">To view more</button>
Copy the code

CSS styles are as follows:

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
}

/* Add this class */ when a button is clicked
article.extended {
  height: 628px;
}

button {
  padding:.6rem;
}
Copy the code

JavaScript is as follows:

const seeMore = document.getElementById('seeMoreBtn')
const article = document.getElementById('article')

seeMore.addEventListener('click'.() = > {
  article.classList.toggle('extended')

  const extended = article.classList.contains('extended')
  if (extended) {
    seeMore.innerHTML = 'Pack up the content'
  } else {
    seeMore.innerHTML = 'See more'}})Copy the code

Add a CSS Transition property to the article so that the content slides silky up and down when a button is clicked.

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
  transition: height 0.4 s linear;
}
Copy the code

Now apply it to your article and you can see that it slides silky up and down. It’s easy and convenient, but there are limitations to this method. So let’s see.

limit

This limitation is whether to know its height. In the example above we clearly know the height of the article, which works very well, but when we are working with dynamic content, we do not know the height of the element, which can also change depending on the screen size or other means.

The solution is simple. For dynamic content, the height of the element should be set to auto. This way, any increase or decrease in element height will be adaptive. But there’s another problem: When the height of the element is set to AUTO, the CSS Transition won’t work.

The good news is that there is a way to solve this problem without resorting to more JavaScript.

The solution

The solution is to transform the max-height property instead of the height property. First, we must estimate the maximum height that our elements can reach. Then, when the element expands, we set the max-height of the element to be greater than our estimate.

Let’s change the height property to max-height:

article {
    max-width: 800px;
    max-height: 300px;
    overflow-y: hidden;

    /* Increase the transition time to adjust to the height */
    transition: max-height 0.7 s linear;
}

article.expanded {
    max-height: 1500px;
}
Copy the code

The way the animation works, we still get the effect we want. The transition time may need to be adjusted depending on the effect you want.