CSS transition expands and collapses elements by changing height

Time:2022-5-9

A common development requirement is that we want to collapse part of the element until it is needed. Some common frameworks (such as bootstrap and jQuery) provide conversion effects. However, CSS transition gives us a lot of flexibility in terms of conversion height. Therefore, you do not have to add other frameworks to the project.
Let’s take a look at how to use CSS transition to set the animation effect of height attribute, as well as its existing problems and solutions.
You canView effect

Transition height

What we want to achieve is that when we click the view more button, we will increase the height of the element to display all the contents of the article. When we click again, it will return to its original appearance.
We will create a CSS class for this. When you click the view more button, this class is added to the < article > element using JavaScript.
First, we will add a} element to the HTML file and add some content to it.

<article id="article">
  <h3>Use CSS transition to expand and collapse elements by changing 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" > see more < / button >

CSS styles are as follows:

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

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

button {
  padding: .6rem;
}

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 = 'stow content'
  } else {
    seeMore. InnerHTML = 'view more'
  }
})

Add CSS transition transition attribute to the article so that the content can slide up and down smoothly when it clicks the button.


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

Now apply it to your article. You can see that it can slide up and down. It is very simple and convenient, but there are limitations in this method. Let’s take a look.

limit

This limitation is reflected in whether we know the height. In the above example, we clearly know the height of the article, and it works very well. However, when we are dealing with dynamic content, we do not know the height of the element, and its height may also change with the screen size or other ways.
In fact, the solution is also very simple. For dynamic content, the height of the element should be set to auto. In this way, any increase or decrease in element height will be adaptive. But there is another problem: CSS transition will not work when the height of the element is set to auto.
The good news is that there is a way to solve this problem without resorting to more JavaScript.

Solution

The solution is to convert the max height attribute instead of the height attribute. First, we must estimate the maximum height that our elements can reach. Then, when the element is expanded, we set the element to Max height greater than our estimate.
We change the height attribute to Max height:

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

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

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

With the working principle of this animation, we still get the effect we want. The transition time may need to be adjusted according to the effect you need.

This is the end of this article about CSS transition expanding and collapsing elements by changing height. For more information about CSS height expanding and collapsing elements, please search previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Python implements 8 common sampling methods

catalogue Probability sampling technique 1. Random sampling 2. Stratified sampling 3. Cluster sampling 4. Systematic sampling 5. Multistage sampling Non probabilistic sampling technique 1. Convention sampling 2. Voluntary sampling 3. Snowball sampling summary Let’s talk to you todaysamplingSeveral common methods andPythonHow to implement in. samplingIt is a very important and frequently used method in statistics […]