I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the implementation logic here in order to keep things concise.
Below is the React code snippet:
<div class="container">
{accordions.map(acc => (
<div class="accordion">
<AccordionSummary text={acc.summary} />
<AccordionDetails text={acc.details} />
</div>
))}
CSS styling:
.container {
display: grid;
grid-template-columns: repeat(2,1fr);
}
The issue with this implementation is that clicking on an accordion in one column causes the other column to expand as well, since they are located within the same row.
An optimal solution would be to have two separate columns, each with a grid display to prevent this behavior. However, distributing accordions evenly across these two columns poses its own challenge.
If anyone has suggestions on how to modify the existing React code to avoid expanding another column, please share your insights!