Accessibility
This component handle the appropriate semantic markup internally (including auto generated id between the summary and detail-section).
You still have to make sure that you use the right headingLevel relative
to the context where the component is actual is rendered.
<Details
headingLevel={2} // 👈 relative heading level
summary='More on how useEffect works'
>
<p>
Here are som information regarding the question.
</p>
</Details>Multiple details
When using multiple details together, wrap the multiple details in the <DetailsList>-component.
This will see to that:
- Correct semantics, using
<ul>+<li>elements - Spacing between Detail-elements
<DetailsList>
<Details
headingLevel={2}
summary='Read more about react'
>
<p>
Here are som information regarding the question.
</p>
</Details>
<Details
headingLevel={2}
summary='Read more about react-dom'
>
<p>
Here are som information regarding the question.
</p>
</Details>
</DetailsList>