Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis recusandae saepe, fugiat officia impedit assumenda ipsa repudiandae odio ducimus laboriosam, laudantium distinctio illo voluptatem tenetur beatae quo!
Tilføj interpolate-size: allow-keywords på html, og animér ::details-content med allow-discrete, så accordionens indhold kan åbne og lukke blødere.
<section class="faq-section">
<h2>FAQ</h2>
<details open name="accordion">
<summary>Fold mig ud 1</summary>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis recusandae saepe, fugiat officia impedit assumenda ipsa repudiandae odio ducimus laboriosam, laudantium distinctio illo voluptatem tenetur beatae quo!</p>
</div>
</details>
<details name="accordion">
<summary>Fold mig ud 2</summary>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet doloremque quaerat ipsa voluptates temporibus a quibusdam facilis?</p>
</div>
</details>
</section>
Hints
html {
interpolate-size: allow-keywords;
}
::details-content {
height: 0;
overflow: clip;
transition: height 0.3s allow-discrete;
}
:open::details-content {
height: auto;
}Kopier øvelse
Kopiér den aktuelle HTML og CSS til dit eget projekt.