@ls-cabreira
@arnon-bright
Submitted
What challenges did you encounter, and how did you overcome them?
At first I couldn't get the button icon to change and the answer to show up when clicked, So I ask chatgpt for help. I didn't want to but I tried everything solution that I find on the Internet but it doesn't worked, So chatgpt is the last resort.
What specific areas of your project would you like help with?
@ls-cabreira
Posted
The reason the transition is not smooth is because you are using the toggle method. When you add a class, there is no transition. A very popular solution that you can find on YouTube and the official W3S website is to change the element's height property and not its classlist.
Take a look at this article: https://www.w3schools.com/howto/howto_js_accordion.asp
Basically, you need to set the container's maximum height to 0 and add the following properties in the CSS:
transition: max-height, 200ms ease;
overflow: hidden;
In the article, you will see how to access the style attribute and change the height dynamically in your script.
I hope you find that feedback useful :)
@rlboogey
Submitted
Please provide feedback
@ls-cabreira
Posted
You can place the image inside a div and center it with margin: 0 auto. In the image, try using the viewport width unit so that it takes up a percentage of space based on the user's screen. Start with width: 50vw and adjust until the image is visible, but not too stretched.
