Design comparison
Solution retrospective
I am facing only one problem which is that the transition on the question and answer elements is not applied when the class of properties is toggled so my question is how can I overcome that ?
Community feedback
- @grace-snowPosted over 3 years ago
Hi @MaryEhb
Firstly, you've done a fantastic job on this overall! The layout on this can be really tricky. Let me help you polish your solution and make it fully accessible...
Instead of this:
<div class="flex"> <h2 class="question">How many team members can I invite?</h2> <img src="images/icon-arrow-down.svg" class="ans-btn" alt="answer button" title="answer button"> </div>
Try this:
// html <h2 class="flex question"> <button class="question-btn"> How many team members can I invite? <img src="images/icon-arrow-down.svg" class="ans-btn" alt="" aria-hidden="true"> </button> </h2> // css .question-btn { all: inherit; // will inherit all styles from the h2 above }
This would make your code accessible by keyboard and assistive technologies 👍
Obviously, changing the markup would mean you'd need to change the js too....
There is no need for multiple event listeners. Instead, on click of the button toggle one class on/off on the closest
.question-wrap
. This can then control everything else - transform the icon, make question bold, expand the answer.It's more usual in expandable sections to allow more than one to be open at once, but that is your choice really. If you allow more to be open, you may need to add a scrollbar or something which you might not want
The reason you think the transform effect doesn't work on your answer is because you cannot transition the display property. Instead, transform opacity, height, visibility etc. But leave display alone 🙂
I hope all this helps you.
1@grace-snowPosted over 3 years agoAlso, I notice in your js you're using let when you should be using const. Maybe look up more about this and about the addEventListener method
0@MaryEhbPosted over 3 years ago@grace-snow thank you for all of your comments 😻 I will start working on them right away 👍
0
Please log in to post a comment
Log in with GitHubJoin 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