Submitted over 3 years ago

I'm using Radio Button on the Accordion Card FAQ without JavaScript

@cholis04

A solution to the FAQ accordion card challenge

Solution retrospective

I decided not to use JavaScript in this challenge. So I need to use the checked state in CSS. Yes, the checkbox allows for that, but to create an accordion element, there is only one element open, the others will be closed automatically.

So I used some radio buttons to do it. But the drawback is that the radio button cannot be unchecked so the accordion cannot be closed completely. Need some tricks to overcome it.

What do you think?

Code

Please log in to post a comment

Community feedback

Chamu•13,820
@ChamuMutezva
Posted over 3 years ago
Hi Nurcholis, the automated feedback shows that the html structure is not correct. Some of the issues raised may include the following
- heading elements and divs cannot be children of a label element. The label element as well cannot be a child of another label element. Try changing the offending labels into divs
- decorative images can have an empty alt value, other than that, your alt values should be descriptive for the benefit of assistive technology users
- Preferably use rems instead of fixed values like px especially with your fonts, read the following article for a proper explanation why you should use rems instead of px
- take a look at the details-summary element for other options on the accordion.
- using the radio buttons is a good idea as well you only need to sought out the html structure
Happy coding
Marked as helpful
Bashar Khdr•930
@BasharKhdr1992
Posted about 3 years ago
Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?

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