Submitted 4 months ago

Accordion implementation

Sanya•350

@Sanya-Zg

A solution to the FAQ accordion challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

By learning how to make accordion-style drop-down elements.

What challenges did you encounter, and how did you overcome them?

The container didn't expand when opening the accordion. Then I fixed it.

What specific areas of your project would you like help with?

When you click on the accordion button in the mobile version, a blue background appears and then disappears.

Code

Please log in to post a comment

Community feedback

Williams Akanni•350
@shadowbanks
Posted 4 months ago
Hello Sanya,

Congrats on finishing the challenge! 🥳

How to remove the blue background: In mobile browsers, interactive elements like buttons, inputs, text areas, links, and selects often get a default blue highlight. To remove it, you can use the following CSS rule that I found in a Stack Overflow post
```
input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}
```
Other Suggestions:
- For better semantics, I’d recommend using the <main> tag instead of a <div> for .content.
- One last thing, I'd suggest moving the <span class="plus"></span> inside the button. This will ensure that both the text and the icon are clickable. It would look like this:
```
<div class="question">
    <button class="accord-header" aria-expanded="false" aria-controls="content2">
        <span class="plus"></span>
    </button>
</div>
```
Great work overall, and keep it up. Happy coding :))
Marked as helpful
Kravchenko Evgeny•250
@evgeniy8509
Posted 4 months ago
The adaptation is a bit incomplete, but overall the project looks good

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord