<div class="container">
<section>
<details>
<summary>Accordion 1<span><i class="fa-solid fa-caret-down"></i></span></summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quo fugiat perspiciatis! Nihil at
voluptatibus veniam inventore, blanditiis quidem cumque, provident architecto voluptate asperiores culpa.
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
<details>
<summary>Accordion 2<span><i class="fa-solid fa-caret-down"></i></span></summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quo fugiat perspiciatis! Nihil at
voluptatibus veniam inventore, blanditiis quidem cumque, provident architecto voluptate asperiores culpa.
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
<details>
<summary>Accordion 3<span><i class="fa-solid fa-caret-down"></i></span></summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quo fugiat perspiciatis! Nihil at
voluptatibus veniam inventore, blanditiis quidem cumque, provident architecto voluptate asperiores culpa.
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
<details>
<summary>Accordion 4<span><i class="fa-solid fa-caret-down"></i></span></summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quo fugiat perspiciatis! Nihil at
voluptatibus veniam inventore, blanditiis quidem cumque, provident architecto voluptate asperiores culpa.
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
</section>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
box-sizing: border-box;
}
body{
background: #22232e;
}
.container{
padding-bottom: 70px;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container section{
width: 600px;
margin: 100px auto;
}
.container section details summary{
padding: 15px;
background: #e0ffff;
color: #22232e;
position: relative;
list-style: none;
outline: none;
cursor: pointer;
font-size: 20px;
}
.container section details{
margin: 15px;
}
.container section details p{
font-size: 15px;
padding: 10px;
color: #333;
background: #e0ffff;
}
.container section details summary span{
font-size: 22px;
color: #333;
float: right;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.