Весь столбец карточек расширяется одним кликом ⇐ CSS

[Anonymous]

Я создал карточки для этой вкладки с помощью цикла, и данные поступают из базы данных.
Когда я нажимаю кнопку «Показать больше», весь видимый столбец расширяется вместе с ней.
Так и есть. не показывать контент, просто расширяя его; содержимое становится видимым, когда я нажимаю «Показать больше».
но если в строке только одна карточка, она просто расширяется.

Код: Выделить всё

import React, { useState } from "react";
import {
Box,
Card,
CardActions,
CardContent,
Collapse,
Button,
Typography,
Rating,
useTheme,
useMediaQuery,
} from "@mui/material";
import Header from "../../components/Header";
import { useGetProductsQuery } from "../../state/api";
import LinearProgress from "@mui/material/LinearProgress";

const Product = ({
_id,
name,
description,
price,
rating,
category,
supply,
stat,
}) => {
const theme = useTheme();
const [isExpanded, setIsExpanded] = useState(false);

return (



{category}


{name}


${Number(price).toFixed(2)}



{description}


 setIsExpanded(!isExpanded)}
sx={{ backgroundColor: theme.palette.secondary[600] }}
>
See More




id: {_id}
Supply Left: {supply}

Yearly Sales This Year: {stat[0].yearlySalesTotal}


Yearly Units Sold This Year: {stat[0].yearlyTotalSoldUnits}




);
};

const Products = () => {
const { data, isLoading } = useGetProductsQuery();
const isNonMobile = useMediaQuery("(min-width: 1000px)");

return (


{data || !isLoading ? (

{data.map(
({
_id,
name,
description,
price,
rating,
category,
supply,
stat,
}) =>  (

)
)}

) : (



)}

);
};

export default Products;

Это изображение карточек.
Ну, я ожидаю, что оно будет раскрываться только по одной карточке за раз

Подробнее здесь: https://stackoverflow.com/questions/781 ... -one-click