console
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>折叠面板</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<input type="radio" id="item1" name="item">
<label for="item1">Item1</label>
<div class="context">
<span>test1</span>
</div>
<input type="radio" id="item2" name="item">
<label for="item2">Item2</label>
<div class="context">
<span>test2</span>
</div>
<input type="radio" id="item3" name="item">
<label for="item3">Item3</label>
<div class="context">
<span>test3</span>
</div>
</div>
</body>
</html>
<style>
*{
margin:0;
padding:0;
}
body{
width:100%;
height:100%;
}
.container{
width:80%;
height:400px;
margin:0 auto;
margin-top:30px;
border-radius:1px;
}
input{
display:none;
}
label{
display:block;
background-color: #F5F5F5;
width:99%;
height:40px;
margin:0 auto;
border:1px solid #dddddd;
border-radius:2px;
margin-top:5px;
line-height: 40px;
}
.context{
width:99%;
height:0px;
margin:0 auto;
border:1px solid #dddddd;
border-radius:2px;
visibility: hidden;
}
input:checked + label + .context{
visibility: visible;
height:50px;
}
</style>