我想点击每一个label实现隐藏的p出现，但是不能实现动画？为什么？
我想点击某一个label实现toggle，就是点两次收回去，能用纯css实现么？
JSFiddle
https://jsfiddle.net/liuestc/1wfz5btp/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.content {
width: 400px;
height: 300px;
background: #ccc;
margin:40px auto;
border:1px solid #eee;
}
label{
padding:10px;
}
.content>div{
width:100%;
transition: all ease 1s;
}
p{
word-break: break-word;
height: 0%;
overflow: hidden;
max-height: 0;
transition: all ease 1s;
margin:10px;
/*line-height: 0;*/
}
input[type=radio]{
transition: all ease 1s;
-webkit-appearance:none;
}
input[type=radio]:checked+p{
height:100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="content">
<div>
<label for="demo1">demo1</label>
<input type="radio" name='demo' id='demo1'>
<p>dsfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfovj</p>
</div>
<div>
<label for="demo2">demo2</label>
<input type="radio" name='demo' id='demo2'>
<p>ewrsdsfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfokj</p>
</div>
<div>
<label for="demo3">demo3</label>
<input type="radio" name='demo' id='demo3'>
<p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
