Как сделать такое открытие и закрытие блоков?

Question

[Андрей Никифоров]

Я ищу какое-то универсальное решение-библиотеку чтобы сделать типа https://i.imgur.com/UIrse9H.gif но этот код я не могу взять, т.к он на абсолютах, а решение на модальных окон не подходит, я хочу сделать просто цепочкой в самом окне



"меню" может быть до 3-х уровней с возможностью вернуться назад

Comments

[assainofthemist]

Там обычное создание модальных окон.
Все стили прописываются в .css файлах. (Там можно и посмотреть)

Сам сайт на React / Vue ?

[Вадим]

Давайте я накину немного абсурдную аналогию для Вашего вопроса:
Не понимаю как дойти до холодильника. Я должен вставать с кровати и дойдя до холодильника открывать дверь. Как я могу это сделать? У холодильника может быть 2 камеры хранения.

Не очень понятно в чём проблема, верно?
На 78ом вопросе стоило бы уже задавать более конкретные вопросы.

Чего Вы не понимаете? В чём сложность? Где Ваш код?

[Андрей Никифоров]

Вадим, окей, я думал вопрос будет понятен тем кто такое реализовывал, писал в торопях просто

Я ищу какое-то универсальное решение-библиотеку чтобы сделать типа https://i.imgur.com/UIrse9H.gif но этот код я не могу взять, т.к он на абсолютах, а решение на модальных окон не подходит, я хочу сделать просто цепочкой в самом окне

[Вадим]

Андрей Никифоров, так, хорошо. Что значит "цепочкой в самом окне"? Чтоб раскрывались последовательно друг за другом как аккордеон? Или это Вы так назвали эффект как на видео из ссылки?

[Андрей Никифоров]

Вадим, как аккордеон да, чтобы структура была древовидная, до 3 уровней, с возможностью вернуться назад по кнопке, кода еще никакого нет

[Вадим]

Андрей Никифоров, что значит до 3х уровней? Из чего они должны складываться? На картинке у Вас можно сказать плоская структура. Заказ -> отзыв. Какие ещё уровни?

[Андрей Никифоров]

Заказ -> Отзыв -> Редактирование отзыва

Структура такая:

Все отзывы (в модалке)
- Отзывы
-- Отзыв в подробностях
-- Редактирование отзыва

Каждый уровень должен открываться с анимацией как на gif, ну или не display:none

Answer 1

[Максим]

Типа такого ?
1) https://codepen.io/alvarotrigo/pen/NWyqRvq
2) https://codepen.io/vixxofsweden/pen/xxGGYOE