Как сделать что бы стрелочка двигалась вместе с открывшимся блоком?

Question

[freeman0204]

Код Сейчас если открыть первый блок стрелочки остаются на месте справа. А нужно что бы высота как я понимаю этой картинки изменилась при открытии блока, и стрелочки опустились ниже так, что бы нижняя стрелочка доставала до середины второго блока, так как это было в закрытом состоянии блока. Вообщем что бы структура оставалась и не ломалась логика.
Подскажите саму суть как это можно сделать?

Comments

[Алексей A]

Это же цельный рисунок (стрелки и чашка). Если его растягивать - будет некрасиво. Лучше тогда уж стрелки сделать через CSS или SVG. А дальше привязку к чашке и блокам.

Answer 1

[Cyrilca]

Можно попробовать так:

Как я сейчас вижу картинке назначена position absolute top 40px; Задайте 0px.
Смените position:top на you-will-item.height / 2 чтобы вне зависимости от height картинка оставалась по центру.
на клике по блоку назначьте картинке background-size:contain чтобы она изменяла размер в зависимости от ее height.
при клике увеличьте height картинки примерно таким образом: 1 Item Height / 2 + 2 Item Height / 2 + white margin bottom.

т.е допустим длина первого toggled блока в открытом состоянии равна 206px. 206/2 = 103
второй блок 96/2 = 48
примерный margin-bottom между блоками около 15px.
Получаем height = 103 + 48 + 15.