I am trying to build an accordion with react and honestly I stuck again!! I feel very stupid because I still can not solve this simple challenge by myself and I really doubt my skills…
However, I hope someone here can help me. I know how to open a model with react, but I can not convert this knowlage to open different elements by one click.
First I thought to make it with CSS transition, but since I like to get better with JS and React I would like to create it with JavaScript.
This is the html structure:
export default function FAQ() {
return (
<div className="faq-section__container">
<section className="faq-section__wrapper">
<h2>Frequently Asked Questions</h2>
<div className="faq__wrapper">
<div className="faq">
<div className="question">
<p>How can I secure my payment?</p>
</div>
<div className="answer">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div className="faq">
<div className="question">
<p>How can I reach you and when will I get an answer?</p>
</div>
<div className="answer">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</section>
</div>
);
}
I think it is best if you provide us a link to the entire project so we can see all of your code. Also, I think you should elaborate on exactly how your accordion should function.
One thing that jumps out at me right now is that you aren’t using <button>s for the questions, which I’m assuming the user will click on to expand the answer. If the user can click on an element to make it do something (in this case, show the answer) then the element should be an actual clickable element, such as a <button>. This makes it accessible for everyone.
There is an accordion example provided by the W3C for ARIA best practices that you can look at. It tells you all of the necessary keyboard functionality you must include.
Also, something like this is a good candidate for using the <details> and <summary> elements.
I think it is best if you provide us a link to the entire project so we can see all of your code. Also, I think you should elaborate on exactly how your accordion should function.
It is part of a big project, so I will seperate this as a single component. I think this is a better workflow, also in case I forgot something in the future. When I have it I will u.pload it on Github
One thing that jumps out at me right now is that you aren’t using <button> s for the questions, which I’m assuming the user will click on to expand the answer. If the user can click on an element to make it do something (in this case, show the answer) then the element should be an actual clickable element, such as a <button> . This makes it accessible for everyone.
Oh I was not sure about that, you can also make a <div>element clickable, but for a better accessability we should always use the button tag?
There is an accordion example provided by the W3C for ARIA best practices that you can look at. It tells you all of the necessary keyboard functionality you must include.
I will check that out and see if I can solve it myself. Thank you!
Technically you could make the div accessibly “clickable” using not only a click handler, but also a keydown and keyup handler (for keyboard users to be able to click on it). But why go to all that extra work when you can just use a <button> and have one click handler on it? An accordion is a type of disclosure widget, and you would almost always use a <button> as the clickable trigger unless you had a very good reason not to.