Skip to content
Submitted about 1 year ago

FAQ-accordion-solution

Cryptoguy5•30
@Cryptoguy5
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud that I was able to install all of the functionality that I wanted to add to this project including adding functionality to both the enter button and spacebar.

The thing that I would do differently is that I would make sure to add a keyindex attribute at the beginning of the coding process to make sure that the app is accessible to everyone.

What challenges did you encounter, and how did you overcome them?

I encountered quite a bit of difficulty getting responsiveness from the buttons. The way that I solved it was trying to get a response of any kind from the app, and then worked to get it closer and closer to my desired action.

I also struggled to add keyboard functionality to the app as I had never done that in a project before. That challenge was overcome by doing a lot of research and trial and error.

What specific areas of your project would you like help with?

I was not able to get the min-height and max-height properties of the page to work properly. I wanted the page to expand if the user opened all of paragraphs at once, but I was not able to do this, so I just created a single set size that would work decently no matter what the FAQ height is.

Is there a way that I could get the page size to expand with the div of the FAQ? How would I do this?

Code

Please log in to post a comment

Log in

Community feedback

  • Ortaly•1,190
    @ortalyarts

    Hey @Cryptoguy5,

    Congrats on completing the challenge!

    I have a few suggestions:

    1. I think you just don't need to specify the height for your accordion container (div.faq). If you remove min-height: 65%; (line 50) it should work just fine and adjust the height automatically according to the content.
    2. Also for your accordion container (div.faq), it might be better to set the max-width to match the design file (i.e. max-width: 37.5rem;). This way it will not be too stretched on wide screens.
    3. Set cursor: pointer for the div.question, so the user knows it is clickable.
    4. Remove position: absolute from the image.plus, because it causes overlapping of text and image in narrow screens. Instead, to better arrange the div.question, try to use justify-content: space-between. This should place the h4 & the img as in the design file.
    5. Alternatively to nr.4 (if you do need position: absolute) try adding padding-right to the div.question, so that the h4 wouldn't reach the img.

    I hope you find this helpful :) Cheers!

    Marked as helpful
  • Josep Ocaña•110
    @Josep-Ocana

    Hi Cryptoguy5!! I like your project !!😊

    If you want to expand your div.faq you can add this property:

    margin: (distance that you want in rem,px...etc.) auto;

    So when you'll expand your accordion, it'll expand to down. And with auto your div.faq will be in center of your page horizontally.

    Marked as helpful

Join 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