@arturpawlowski5
Posted
Hi,
First - thank you very much for such a good example of this Challenge.
I based my work on your solution and I learn a lot by doing this. I hope this not break any rules - I'm new here and in Web Dev. Let me know if I break any rules.
I have one question now that I couldn't figure out.
_animation.scss
.faq__desc.show-description { height: 2rem; margin-bottom: 15px; }
index.html
` <dd> <p id="faq1_desc" data-qa="faq__desc" class="faq__desc"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </p>
</dd> `This code in _animation.scss and index.html is responsible for line height when the Question is open. Because of that Question can have just 2 lines to not disappear on the bottom.
How to manage this code better so there can be even 10 lines Question and this will not disappear on the bottom?
@ALapina
Posted
@arturpawlowski5 Wow! Thanks for your comment! This made my day 😊 And very good question about height! And I don't have a good answer for this 🤔 My thoughts: We can try with display:none and display: block. But I didn't find a way how to animate display none and block properly :( I only managed to animate text opacity. Here is example:
.faq__desc {
margin-left: -40px;
padding-right: 17px;
margin-top: 0;
margin-bottom: 0;
display: none;
animation: example 500ms ease-out;
}
.faq__desc.show-description {
display: block;
margin-bottom: 15px;
}
@keyframes example {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Also, there is a good comment above to use summary and details. Maybe these tags are animated better 🤔 I will defiantly try next time with faq accordion on a next challenge
