Transition CSS naturelle (sans hack) élément HTML details

Votre navigateur ne supporte pas cette démonstration

Le nouveau pseudo-élément ::details-content permet de cibler le contenu et ainsi d'obtenir une transition naturelle à l'ouverture et fermeture de l'élément HTML details.

Dans cette démonstration, nous souhaitons animer la propriété height pour dérouler le contenu, dont la taille n'est pas connue, à l'intérieur de l'élément details. En effet, nous voulons que la taille du contenu s'adapte automatiquement. Autrement dit, nous allons appliquer une transition à un contenu qui possède une dimension intrinsèque, ce qui n'était pas possible auparavant.

Pour ce faire, nous aurons besoin de la propriété interpolate-size afin de nous permettre d'appliquer une transition sur une valeur de taille intrinsèque. Nous allons également utiliser le pseudo-élément ::details-content dans lequel nous déclarons la transition.

<div class="accordeon">

<details>

<summary>Titre</summary>

<div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
			
</div>
		
</details>
	
	...
	
</div>

* {
    box-sizing: border-box;
    margin: 0;
  }
  
	
	
.accordeon{
max-width:75ch;
margin:auto;
counter-reset: chapter;
	
	}
			
	
::details-content {
	
opacity:0;
height: 0;
overflow: clip;/*pour cacher le contenu*/
	
}

[open]::details-content {
	
height: fit-content;
opacity: 1;
	
}

details {

counter-increment: chapter;
border: 1px solid oklch(25% 0.05 282);
background-color:oklch(89% 0.05 282);

}


details[open]:not(:first-child) {
	margin-top: .5rem;
}
details[open]:not(:last-child) {
	margin-bottom: .5rem;
}

	
details:not([open]):has(+ details:not(details[open])) {
	border-bottom-color: transparent;
}

summary {

cursor: pointer;
padding: .5rem 1rem;
text-transform: uppercase;
display: grid;
column-gap: .5rem;
grid-template-columns: auto 1fr auto;
align-items:center;
	
	}
	
summary::before {

content: counter(chapter);
background-color:oklch(60% 0.20 282);
color: oklch(12% 0.02 282);
height: 1lh;
aspect-ratio: 1;
text-align: center;
border-radius: 50%;

    }	
	
summary::after {
	
content: "";
border-top: .125cap solid ;
border-right: .125cap solid;
border-top-right-radius: .125cap;
pointer-events:none;
rotate:135deg;
height:1cap;
aspect-ratio: 1;
transition: rotate 0.5s;
		
	}
	
	[open] summary::after {
		rotate:315deg;
	}

	

details >div {

	padding: 0 1rem 1rem;	
}
	
[open] div p{margin:1rem 0}
	
@media (prefers-reduced-motion: no-preference) {
:root{interpolate-size: allow-keywords;}	
::details-content {

transition: height 600ms cubic-bezier(0, 0.02, 0.55, 1.45), 
opacity 600ms,
content-visibility 600ms allow-discrete;
	
	}
	
	}

Si vous souhaitez créer un accordéon exclusif, c'est-à-dire un accordéon où l'onglet ouvert se referme lorsque l'utilisateur ouvre un autre onglet, il vous faudra utiliser l'attribut HTML [name] afin de regrouper les éléments details entre eux. Vous devez indiquer le même nom pour chaque élément.
Attention toutefois avant de mettre en place cette fonctionnalité. Si l'utilisation d'un accordéon exclusif réduit la quantité d'espace visuel occupé par le contenu, les utilisateurs pourraient être déroutés s'ils souhaitent consulter plusieurs contenus en même temps.

<div class="accordeon">

<details name="votre_nom">

<summary>Titre</summary>

<div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
			
</div>
		
</details>
	
	...
	
</div>