Как сдвигать контент при открытии таба UI Tabs?

Question

[Илья Молодкин]

Доброго времени суток.
Делаю меню похожее на canon.ru

Использую стандартные ui tabs
Из-за дурного макета (уже утвержденного) не могу сделать сдвиг контента при открытии вкладки.

Выглядит это так https://gyazo.com/e8e366a391e63bf29f866c501151043d
При открытии так https://gyazo.com/5dfb2ed12ad41fe8eb62de0cb0adab15

Мозг сломался, не могу понять как надо прописать сдвиг основного контента.

Comments

[Алексей Самсонов]

он вниз сдвигается о_О
это же дико бесячий макет, который все равно попросят переделать :)

[Илья Молодкин]

В том то и дело что хотят ИМЕННО так...

Answer 1

[Sergey Vydayko]

блоку который должен выпадать, после нажатия на пункт меню, делаешь display: block и фиксированную высоту, для плавности, как у них добавь transition: 300ms height ease-out; и вроде бы все. Вот набросал, только перенеси к себе, на fiddle почему-то не видит класс https://jsfiddle.net/Vydayko12/aLpbvpva/2/

Comments

[Sergey Vydayko]

Погоди, там у меня ошибка, сейчас исправлю!

[Sergey Vydayko]

$(document).ready(function(){
$(document).on('click', '.lol', function(){
$('.sh').toggleClass('shove'); - класс должен был быть в скобках, я тупанул, ссори
});
});

[Sergey Vydayko]

https://jsfiddle.net/Vydayko12/aLpbvpva/3/

[Илья Молодкин]

Sergey Vydayko: Спасибо! transition: 300ms height ease-out; куда именно втыкать?
скорее всего проблема не только в этом - есть ещё слайдер с позицией absolute и только так... как его двинуть при открытии?

[Sergey Vydayko]

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