@Evgeii

Как сделать, чтобы одновременно был открыт только один элемент аккордеона?

Есть аккордеон. Нужно сделать, чтобы при клике на кнопку раннее открытый элемент закрывался, т.е. одновременно был только один открытый. Как такое реализовать?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
0xD34F
@0xD34F
const AccordionItem = ({ title, opened, toggle, children }) => (
  <div>
    <button onClick={toggle}>{title}</button>
    {opened && children}
  </div>
);

const Accordion = ({ items }) => {
  const [ opened, setOpened ] = useState(null);

  return (
    <div>
      {items.map((n, i) => (
        <AccordionItem
          title={n.title}
          opened={i === opened}
          toggle={setOpened.bind(null, i === opened ? null : i)}
        >
          <p>{n.text}</p>
        </AccordionItem>
      ))}
    </div>
  );
};
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@bitwheeze
Ну если у каждого элемента аккардиона есть свой уникальный id, то в стейте храните id открытого элемента. А в каждом элементе что то вроде такого делайте

const [openId, setOpenId] = useState();
return (<>{elems.map(el => <AccElement key={el.id} open={opendId===el.id} onClick={() => setOpenId(el.id)} data={el} />}</>);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы