<div class="faq-container">
<details class="faq-item" open>
<summary class="faq-question">How do I reset my password?</summary>
<div class="faq-answer">Go to settings and click on security. You will find the reset option there.</div>
</details>
<details class="faq-item">
<summary class="faq-question">Can I upgrade my plan later?</summary>
<div class="faq-answer">Yes, you can upgrade your subscription at any time from your account dashboard.</div>
</details>
<details class="faq-item">
<summary class="faq-question">Do you offer technical support?</summary>
<div class="faq-answer">We offer 24/7 support via email and live chat for all our premium customers.</div>
</details>
</div>.faq-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-item {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s;
}
.faq-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-question {
padding: 20px;
font-weight: 600;
cursor: pointer;
list-style: none;
position: relative;
color: #1f2937;
font-size: 1.05rem;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::after {
content: "+";
position: absolute;
right: 20px;
font-size: 1.5rem;
color: #3b82f6;
transition: transform 0.2s;
}
details[open] .faq-question::after {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 20px 20px;
color: #4b5563;
line-height: 1.6;
border-top: 1px solid #f3f4f6;
}Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.