代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: url(https://img2.baidu.com/it/u=2454514179,2513325147&fm=26&fmt=auto&gp=0.jpg)
no-repeat;
height: 600px;
background-size: 100% 100%;
}
#demo {
width: 40%;
margin: 150px auto;
}
.box {
border-radius: 50px;
}
.title {
background-color: #bdbdbd;
border: 1px solid #000;
padding: 10px;
cursor: pointer;
font-size: 1.2rem;
color: white;
}
.title:hover {
background-color: #dda55a;
}
.content {
height: 0;
overflow: hidden;
transition: height 1s;
background-color: white;
padding: 0 10px;
}
.open + .content {
height: 190px;
}
</style>
</head>
<body>
<div id="demo">
<div class="box">
<div class="title">吉他</div>
<div class="content">
吉他（意大利语：Chitarra），又译为结他或六弦琴。是一种弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
古典吉他与小提琴、钢琴并列为世界著名三大乐器。
</div>
</div>
<div class="box">
<div class="title">贝斯</div>
<div class="content">
贝斯（Bass）
是乐队中一般必不可少的乐器之一，它在乐队中主要担任低音声部，有时也作即兴独奏。传统爵士乐一般都采用原声贝司（即低音提琴）来体现它的原始风味。而在现代爵士乐（特别是融合爵士）中经常运用电贝斯或电子合成器中的合成贝斯音。
如今电声乐器的广泛发展与流行使乐队这个词发生了巨大的变化，人数减少了，通常4人即可组织一个乐队，分别由节奏（架子鼓）、低音（贝斯）、和弦（吉他）、主旋律（键盘）。电声乐队中的BASS其实就是低音吉他，全称应该叫BASS
GUITAR。应用谱号：低音谱号，不宜调高八度记谱。外观：BASS形状与通常电吉他很相似，略重一些，音阶处于低音位置，因此琴弦相当粗，弦张力相当大，因此拨弦的力量要比吉他大得多。
</div>
</div>
<div class="box">
<div class="title">钢琴</div>
<div class="content">
钢琴（意大利语：pianoforte）是西洋古典音乐中的一种键盘乐器，有“乐器之王”的美称。由88个琴键（52个白键，36个黑键）和金属弦音板组成。意大利人巴托罗密欧·克里斯多佛利（Bartolomeo
Christofori） [1] ，（1655-1731）在1709年发明了钢琴。
钢琴音域范围从A2（27.5Hz）至
C5（4186Hz），几乎囊括了音乐体系中的全部乐音，是除了管风琴以外音域最广的乐器。钢琴普遍用于独奏、重奏、伴奏等演出。
</div>
</div>
<div class="box">
<div class="title">尤克里里</div>
<div class="content">
Ukulele即夏威夷小吉他，在港台等地一般译作乌克丽丽，在大陆一般习惯称为尤克里里，是一种四弦夏威夷的拨弦乐器，发明于葡萄牙盛行于夏威夷，归属在吉他乐器一族。
</div>
</div>
<div class="box">
<div class="title">笛子</div>
<div class="content">
笛子是迄今为止发现的最古老的汉族乐器 [1]
，也是汉族乐器中最具代表性最有民族特色的吹奏乐器。中国传统音乐中常用的横吹木管乐器之一，中国竹笛，一般分为南方的曲笛、北方的梆笛和介于两者之间的中音笛。音域一般能达到两个八度多两个。
笛子常在中国民间音乐、戏曲、中国民族乐团、西洋交响乐团和现代音乐中运用，是中国音乐的代表乐器之一。在民族乐队中，笛子是举足轻重的吹管乐器，被当做民族吹管乐的代表。
大部分笛子是竹制的，但也有石笛、玉笛及红木做的笛子，古时还有骨笛。不过，制作笛子的最好原料仍是竹子，因为竹笛声音效果较好，制作成本较低。
</div>
</div>
</div>
<script>
let title = document.getElementsByClassName("title");
for (let i = 0; i < title.length; i++) {
title[i].onclick = function () {
if (this.className === "title open") {
this.classList.remove("open");
} else {
for (let i = 0; i < title.length; i++) {
title[i].classList.remove("open");
}
this.classList.add("open");
}
};
}
</script>
</body>
</html>
效果如下:
