Is there a way to create a collapsible panel using only CSS similar to the Bootstrap bootstrap collapse panel?
Why isn't the max-height transition working for me?
How can I toggle the panel if it's checked, and have the panel collapse when double-clicked?
* {
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: max-height ease 1s;
}
input[type=radio]{
transition: all ease 1s;
-webkit-appearance:none;
}
label:hover+input+p{
max-height: 100%;
}<div class="content">
<div>
<label for="demo1">demo1</label>
<input type="radio" name='demo' id='demo1'>
<p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p>
</div>
<div>
<label for="demo2">demo2</label>
<input type="radio" name='demo' id='demo2'>
<p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji ;dfokj</p>
</div>
<div>
<label for="demo3">demo3</label>
<input type="radio" name='demo' id='demo3'>
<p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p>
</div>