<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">列表1</label>
		<p>内容1<br>内容2<br>内容3<br>内容4</p>
	</article>
	<article>
		<label for="collapse2">列表2</label>
		<p>内容1<br>内容2<br>内容3<br>内容4</p>
	</article>
	<article>
		<label for="collapse3">列表3</label>
		<p>内容1<br>内容2<br>内容3<br>内容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;
}

li {
}
li:hover {
}

<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;
}