Skip to content
OverviewSolutions
8
Comments
2
P
Dullahan
@Dullahan83

All comments

  • Nick•520
    @mrsev17Submitted 10 months ago

    Let me know if you find mistake in my code or you know how i can improve him

    FAQ accordion (React)

    2
    Dullahan•290
    @Dullahan83Posted 10 months ago

    Hello :)

    Your Solution looks nice,.

    Neverless, after looking at the preview site and your code, there is 2 principal issues that you could fix pretty easily:

    • You shouldn't use a fixed height for the .faq class in your app.css. The height of this container should be the result of the content + the padding. Because actually, if you close all accordions you will have a blank space at the bottom, and if you open most of them at the same time the content will overflow from the container.

    • You should try to hide the bar below the last accordion. Since you use a classname for said bar, it should be pretty easy to do in css with something like .classname:last-of-type{ display: none;}

    I found back this link that you could use to improve further the accordion for better user experience

    I hope this feedback is helpful

    Happy Coding :)

    Marked as helpful
    1
  • Jon D•190
    @jcad57Submitted 10 months ago

    (Disregard the lack of accessibility, I was mostly interested in the JS) I would love to know how to clean up my code, specifically how I could have simplified the JavaScript! I'm new to it and thought this would be a great way to reinforce what I had learned and while I got it working I know it's probably overkill!

    Thanks ahead of time

    FAQ with JavaScript

    1
    Dullahan•290
    @Dullahan83Posted 10 months ago

    Hello :) There is not much you could have done with a static version except create a function that takes expander, panel, panelExpanded and img and call it for every accordion there is. That would avoid repeating all the block and just call the fonction n Times with the different params

    But i would suggest you to look either into design pattern or object oriented programming. Mostly to avoid code repetition, one method create the accordion with question and answer as parameters. That would make it go from static to dynamic and it's more interesting :)

    But your solution works, and it's the most important.

    Marked as helpful
    1