Skip to content
OverviewSolutions
10
Comments
2
Leonardo
@ls-cabreira

All comments

  • arnon-bright•160
    @arnon-brightSubmitted 9 months ago
    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?
    • Tried to make a ease in and out transition but it doesn't work

    FAQ Accordion

    1
    Leonardo•100
    @ls-cabreiraPosted 9 months ago

    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 :)

    0
  • Leonardo•100
    @ls-cabreiraPosted 9 months ago

    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.

    0