Submitted over 2 years ago

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

Nurcholis• 420

@cholis04

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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?

Community feedback

Chamu• 12,970

@ChamuMutezva

Posted over 2 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

Nurcholis• 420

@cholis04

Posted over 2 years ago

@ChamuMutezva The above points really helped me in finding some HTML validation issues. I still have a lot to learn more. And I will change the code to solve it. This is very helpful. Thank you for your response. ✌️

Bashar Khdr• 930

@BasharKhdr1992

Posted about 2 years ago

Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?

Nurcholis• 420

@cholis04

Posted about 2 years ago

@BasharKhdr1992 I gave the container a CSS property background-position to place the image background according to the design. I also added another property to customize. Here's the code

.box-faq {
  margin-top: 70px;
  width: 86%;
  background-color: #ffffff;
  background-image: url('../images/bg-pattern-mobile.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 72%;
  box-shadow: 0 25px 15px -6px rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  padding-bottom: 30px;
}

/* For Desktop */
@media only screen and (min-width: 860px) {
.box-faq {
    margin-top: 0;
    padding-bottom: 0;
    background-image: url('../images/bg-pattern-desktop.svg');
    background-position: -580px -296px;
    background-size: unset;
    min-height: 480px;
    max-width: 920px;
    display: flex;
    align-content: center;
  }
}

That's how I position the background just below the illustration-woman-online image.

Bashar Khdr• 930

@BasharKhdr1992

Posted about 2 years ago

@cholis04 Thank you so much for sharing the code man. I will go through it, and wrap my head around it.

Please log in to post a comment

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