This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- HTML5
- CSS3
- Flexbox
- ITCSS
- Framework Methodology
I have learned to make transitions with effect by affecting the height auto, thanks to max-height.
X No
.faq label {
height: 50px;
overflow: hidden;
cursor: pointer;
transition: height 1s ease;
}
.faq input[type='radio']:checked + label {
max-height: auto;
}
V YES
.faq label {
min-height: 50px;
max-height: 0;
overflow: hidden;
cursor: pointer;
transition: max-height 1s ease;
}
.faq input[type='radio']:checked + label {
max-height: 100vh;
}
- Instagram - @atorres.designs
- Frontend Mentor - @atorres-io
- Github - @atorres-io
- Codepen - @atorres-designs
- LinkedIn - @atorresalcala