How to create Accordion with HTML and CSS Tutorial ( Source Code )
How to Create Accordion with HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<style>
*{
padding: 0;margin: 0;box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh; width: 100vw;
background: linear-gradient(45deg, rgb(21, 255, 146), rgb(152, 62, 255));
}
.container{
width: 450px;
margin: 150px auto;
position: relative;
}
details{
border: 1px solid rgba(255,255,255,0.8);
background-color: rgba(255,255,255,0.3);
margin-bottom: 10px;
padding: 10px;
}
summary{
outline: none;
}
details[open] summary{
border-bottom: 2px solid rgba(255,255,255,0.3);
}
details p{
padding-top: 0;
transition: all 1s;
}
details[open] p{
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<details>
<summary>Headind 1</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eius facilis quidem sequi molestiae iure sapiente corporis
dolorum ipsam minima id obcaecati exercitationem necessitatibus
molestias enim dolore officia quas, doloremque blanditiis.
</p>
</details>
<details>
<summary>Headind 2</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eius facilis quidem sequi molestiae iure sapiente corporis
dolorum ipsam minima id obcaecati exercitationem necessitatibus
molestias enim dolore officia quas, doloremque blanditiis.
</p>
</details>
<details>
<summary>Headind 3</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius
facilis quidem sequi molestiae iure sapiente corporis dolorum
ipsam minima id obcaecati exercitationem necessitatibus molestias
enim dolore officia quas, doloremque blanditiis.
</p>
</details>
</div>
</body>
</html>
Post a Comment