Votre navigateur ne supporte pas cette démonstration
Nulla consequat nec purus vel faucibus. Pellentesque sit amet lectus tincidunt, viverra ex vel, volutpat eros. Morbi vel turpis leo. Phasellus vehicula ipsum porta, ullamcorper nisl vitae, vehicula est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In luctus at lorem posuere finibus. Donec vitae purus vitae turpis condimentum tincidunt in at tortor. Cras laoreet orci in erat tincidunt scelerisque. Maecenas viverra purus ex, et pulvinar massa ultricies sit amet. Aliquam erat volutpat. Phasellus eget metus nec diam suscipit malesuada in rhoncus metus.
input{display: none;}
details{max-width:600px;}
summary {
display: block;/*reset*/
}
label {
display:grid;
grid-template-columns: auto 1fr;
gap:1rem;
background-color:#d9d9d9;
align-items:center;
padding:1rem;
}
label:hover {
cursor: pointer;
}
label::before {
content:"";
height:.625rem;
width:.625rem;
pointer-events:none;
will-change:transform;
transform:translate3d(0,0,0) rotate(45deg);
transition:rotate 400ms;
border-top: 2px solid #000;
border-right: 2px solid #000;
border-top-right-radius: 2px;
}
.contenu-details {
padding:1rem;
display:none;
background-color:#ededed;
height:0;
transition:height 200ms,display 100ms;
transition-timing-function: ease-out
/*overflow:auto;*/
}
details:has(input:checked) .contenu-details{
display:block;
height:15rem;
}
@initial{details:has(input:checked) .contenu-details {height:0}}
input:checked + details label::before,
details:has(input:checked) label::before {
rotate:90deg;
transition: rotate 200ms ease-in;
}