div.c{
position: relative;
margin:0em;
margin-top:5px;
margin-bottom:5px;
background:#f2f2f2;
padding:1em;
border-radius: 10px;
}
div.c h3{
margin-block-start: 0em !important;
margin-block-end: 0em !important;
margin-bottom: 0em !important;
}
input[name=accordion]{
position: absolute;
left: 0;
top: 0;
height: 0%;
width: 100%;
opacity:0;
visibility: 0;
-webkit-user-select: text; /* Chrome all / Safari all */
-moz-user-select: text; /* Firefox all */
-ms-user-select: text; /* IE 10+ */
user-select: text; /* Likely future */
}
div.c label::before{
content:"";
display: inline-block;
border: 15px solid transparent;
border-left:20px solid #ea6c11;
vertical-align: middle;
}
input[name="accordion"]:checked ~ div.c h3 label::before{
border-left:15px solid transparent;
border-top:20px solid black;
margin-top:12px;
margin-right:10px;
margin-bottom:12px;
vertical-align: middle;
}
div.p{
max-height:0px;
overflow: hidden;
transition:max-height 0.0s;
background-color: white;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
}
div.c label{
cursor: pointer;
position: relative;
display: flex;
align-items: center;
}
div.p{
max-height:0px;
overflow: hidden;
transition:max-height 0.0s;
background-color: white;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
}
div.p-c {
padding:2em;
}
input[name="accordion"]:checked ~ h3 label::before{
border-left:15px solid transparent;
border-top:20px solid black;
margin-top:12px;
margin-right:10px;
margin-bottom:12px;
}
input[name="accordion"]:checked ~ h3 ~ div.p{
max-height:100%;
-webkit-user-select: text; /* Chrome all / Safari all */
-moz-user-select: text; /* Firefox all */
-ms-user-select: text; /* IE 10+ */
user-select: text; /* Likely future */
}
@media only screen and (max-width: 600px) {
div.c h3{
padding-bottom:10px;
}
}