Как реализовать выдвигающийся из айтема блок(при нажатии на плюс)?

Question

[FavnAristotel]

Подскажите как реализовать подобное.
Что бы другие айтемы уменьшались пропорционально.
Может есть какой то плагин ?

Comments

[alexalexes]

Ручками, на чистом JS+CSS.
Вешаете обработчик события на кнопку плюса.
В коде обработчика события меняете класс скрытого блока на закрытое/открытое состояние c помощью toggle метода узла (принудительно меняете класс у соседних блоков на закрытый).

В CSS пишете селекторы для открытого и закрытого состояния блока. Если нет никакой анимации, то достаточно манипулировать свойством display, если есть анимация, то нужно числовыми значениями задавать width.

[Ankhena]

Может есть какой то плагин ?

Плагин для чего?
Для flex-shrink/flex-grow?
Ну не смешите.

Также можете анимировать grid-template-columns. Но значения должны быть численными. Min-content или auto не станут анимироваться.

Answer 1

[Антон Усачев]

На скорую руку в качестве примера.