Hi! What's up this is your boy Manohar Anand From the house of Manoarya.
In this article we are going to assist you with How to create details opener and closer using only html. for free.
Are you Guys exited? Let me know in the comment. Ask Questions and give suggestions.
Let's Started.
Fist of all you need to create a file and name it whatever you want.
Now Copy the following codes.
Add HTML Code
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Snap scrolling Effect</title>
</head>
<body>
<div class="container">
<details > <br>
<summary>
About us
</summary>
The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
</details>
<details > <br>
<summary>
About us
</summary>
The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
</details>
<details > <br>
<summary>
About us
</summary>
The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
</details>
<details > <br>
<summary>
About us
</summary>
The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
</details>
<details > <br>
<summary>
About us
</summary>
The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
</details>
</div>
</body>
Add CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
height: 100vh;
width: 100%;
background: #d3d3d3;
}
.container details {
padding: 10px 20px;
background: white;
}
That all for this post. I hope you love this project. please share your thoughts and suggestions in comment below.
Thank you For Visiting. By see You soon.
Top comments (0)