Pure CSS to achieve the list pull-down effect in the page

You may often see the following effect:

That’s right, it’s the commonly used “expand and collapse” interaction form on the page. The usual practice is to control the display attribute value to switch between none and other values. However, although the function can be realized, the effect is very stiff, so there is such a requirement - it is hoped that the element can have an obvious height sliding effect when expanding and collapsing.

The previous implementation could use jQuery's slideUp()/slideDown() method, but on the mobile side, because CSS3 animation is well supported, the mobile JavaScript framework does not provide animation modules. Here, CSS3 technology comes to mind naturally.

My first reaction was to use height+overflow:hidden; which would not only avoid performance issues but also prevent display issues. But in a blink of an eye, it occurred to me that many times the content we need to display is dynamic, which means that the content height is not fixed (of course, you can also use overflow-y:auto; let’s not discuss that for now). To achieve this effect, the height must use "non-fixed value auto"!

However, auto is not a numerical value, but a keyword. Therefore, under an implicit rule that numerical values ​​and keywords cannot be calculated, if we use height to switch between 0px and auto , no transition or animation effect can be formed.

The same is true for clip-path property in CSS: many beginners are accustomed to creating animation effects between none and specific values, which is impossible.

Therefore, to achieve the effect of the beginning of the article, the author recommends the max-height attribute:

<div class="accordion">
	<input id="collapse1" type="radio" name="tap-input" hidden />
	<input id="collapse2" type="radio" name="tap-input" hidden />
	<input id="collapse3" type="radio" name="tap-input" hidden />
	<article>
		<label for="collapse1">List 1</label>
		<p>Content 1<br>Content 2<br>Content 3<br>Content 4</p>
	</article>
	<article>
		<label for="collapse2">List 2</label>
		<p>Content 1<br>Content 2<br>Content 3<br>Content 4</p>
	</article>
	<article>
		<label for="collapse3">List 3</label>
		<p>Content 1<br>Content 2<br>Content 3<br>Content 4</p>
	</article>
</div>

.accordion {
	width: 300px;
}
.accordion article {
	cursor: pointer;
}
label {
	display: block;
	padding: 0 20px;
	height: 40px;
	background-color: #f66;
	cursor: pointer;
	line-height: 40px;
	font-size: 16px;
	color: #fff;
}
p {
	overflow: hidden;
	padding: 0 20px;
	margin: 0;
	border: 1px solid #f66;
	border-top: none;
	border-bottom-width: 0;
	max-height: 0;
	line-height: 30px;
	transition: all .5s ease;
}
input:nth-child(1):checked ~ article:nth-of-type(1) p,
input:nth-child(2):checked ~ article:nth-of-type(2) p,
input:nth-child(3):checked ~ article:nth-of-type(3) p {
	border-bottom-width: 1px;
	max-height: 130px;
}

In CSS, min-height/max-height only appears in adaptive layout or fluid layout. As for the max-height value after expansion, we only need to ensure that the set value is greater than the content height - because when max-height > height, the element height will be calculated based on the height attribute .

However, it is recommended not to set the max-height value too large. After all, the time of transition or animation is "the time to complete the animation" rather than "the time to display the content"

There is another way to show the pulling effect:

Its characteristic is that when the mouse hovers over a part of the component, the part will expand and squeeze the adjacent parts, and return to its original state when the mouse leaves. If you move the mouse quickly over it, it will produce an accordion effect.

To achieve the accordion effect using JS, you must monitor mouseenter and mouseleave mouse events, and CSS's :hover can replace the effects of both. Therefore, the key to achieving the accordion effect with pure CSS is :hover . The core code is as follows:

li {
}
li:hover {
}

As for layout, if you want to expand and shrink elements arranged in a row with the same/different widths within a row, a better way is flex !

<ul class="accordion">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.accordion {
	display: flex;
	width: 600px;
	height: 200px;
}
li {
	flex: 1;
	cursor: pointer;
	transition: all 300ms;
}
li:nth-child(1) {
	background-color: #f66;
}
li:nth-child(2) {
	background-color: #66f;
}
li:nth-child(3) {
	background-color: #f90;
}
li:nth-child(4) {
	background-color: #09f;
}
li:nth-child(5) {
	background-color: #9c3;
}
li:nth-child(6) {
	background-color: #3c9;
}
li:hover {
	flex: 2;
	background-color: #ccc;
}

One thing worth noting here is that in some "special" cases such as animation delays, CSS custom variables can be inserted into HTML as inline styles to simplify the code: Let's start with a project refactoring to talk about how CSS3 custom variables are used in a project?

This is the end of this article about how to achieve the list pull-down effect on the page with pure CSS. For more relevant CSS page list pull-down content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!