How to create Accordion | HTML & CSS Project - Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made Amazing Accordion with the help of HTML and CSS Only!😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Accordion that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Accordion Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for the accordion and for the description of the accordion.
<div>
<details open>
<summary>
How do you create an accordion?
</summary>
<div>
Easy! As long as you don't have to support IE11 or older browsers you could use <code><details></code> and <code><summary></code> natively.
</div>
</details>
<details>
<summary>
What if I have to support IE11 or older browsers?
</summary>
<div>
No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.
</div>
</details>
<details>
<summary>
What type of content can I have inside one of these?
</summary>
<div>
Almost anything you'd like. The <code><details></code> element allows all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content" target="_blank">flow content</a>, which is basically everything.
</div>
</details>
<details>
<summary>
How does it work?
</summary>
<div>
The <code><details></code> element encapsulates the <code><summary></code> element. The <code><summary></code> becomes the 'label' for the <code><details></code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code><details></code> element, making it display. You can therefore style the open and closed states seperately if you'd like.
</div>
</details>
</div>
After the HTML we will design the divs and make changes in design using css.
Output till now
CSS🎈( step - 2)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*, *:after, *:before {
box-sizing: border-box;
}
:root {
font-size: 16px;
}
body {
font-family: "Inter", sans-serif;
line-height: 1.5;
min-height: 100vh;
font-size: 1.25rem;
}
*:focus {
outline: none;
}
body > div {
width: 90%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom: 5rem;
}
details div {
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 1.5em;
}
details div > * + * {
margin-top: 1.5em;
}
details + details {
margin-top: .5rem;
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary {
border: 2px solid #000;
padding: .75em 1em;
cursor: pointer;
position: relative;
padding-left: calc(1.75rem + .75rem + .75rem);
}
summary:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: .75rem;
content: "↓";
width: 1.75rem;
height: 1.75rem;
background-color: #000;
color: #FFF;
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
details[open] summary {
background-color: #eee;
}
details[open] summary:before {
content: "↑";
}
summary:hover {
background-color: #eee;
}
a {
color: inherit;
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 0 0;
}
a:hover {
box-shadow: 0 3px 0 0;
}
code {
font-family: monospace;
font-weight: 600;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
the coder of this project:
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.