Create beautiful FAQ Accordion with HTML and CSS only

Description:

You must be looking to create a FAQ Accordion with HTML and CSS only. Creating the same with HTML and CSS can be fast in terms of website page speed and of-course, will take less time to make accordion with CSS and HTML.

In this blog post, you will get to know, how you can create accordion using pure CSS and HTML <details> and <summary> elements.

How can I make it?

Create HTML structure like following and place your questions in <summary> elements and your answer within <p> element of <div>. You can make as many accordion as you want, you will just need to replicate <details>.

<main>
<details open>
<summary>Question 1</summary>
<div class=”faq__content”>
<p>Answer 1</p>
</div>
</details>

<details>
<summary>Question 2</summary>
<div class=”faq__content”>
<p>Answer 2</p>
</div>
</details>
</main>

2. Add the CSS style to your FAQ Accordion. And, you are done.

main {
max-width: 520px;
margin: 0 auto;
}
summary {
font-size: 1.25rem;
font-weight: 600;
background-color: #fff;
color: #333;
padding: 1rem;
margin-bottom: 1rem;
outline: none;
border-radius: 0.25rem;
text-align: left;
cursor: pointer;
position: relative;
}
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-top: -10px}
100% {opacity: 1; margin-top: 0px}
}
details > summary::after {
position: absolute;
content: “+”;
right: 20px;
}
details[open] > summary::after {
position: absolute;
content: “-“;
right: 20px;
}
details > summary::-webkit-details-marker {
display: none;
}

The post Create beautiful FAQ Accordion with HTML and CSS only appeared first on Lipku.com.

Leave a Reply

Your email address will not be published. Required fields are marked *