Почему не работает toogleClass?

Question

[Павел Воронюк]

Есть вот такая разметка https://codepen.io/pawlek/pen/xYraGG

Пытаюсь сделать следующее:

При клике на button, серый блок должен растянутся на весь экран где отобразятся ранее скрытые инпуты (в идеале слайдер в котором на каждом слайде текст + инпут).

Столкнулся со следующими камнями:

1. Пытался сделать дополнительный скрытый блок который отображать посредством .click(), но не получается сделать нормальную анимацию перехода от маленького блока к большому.

2. Решил имеющийся блок растягивать и отображать ранее скрытые элементы, но не работает .toogleClass() но при этом .addClass работает нормально. И опять же не понятно как сделать красивую анимацию.

Помогите найти правильный путь к решению данного вопроса.

Comments

[Dnebl]

toggleClass

Answer 1

[Exploding]

toogleClass
toggleClass

не получается сделать нормальную анимацию перехода от маленького блока к большому

Что именно не получается? И вообще, что значит в Вашем понимании "нормальная/красивая анимация"?

Answer 2

[Евгений]

У Вас ещё в css transition неправильно указан. Надо использовать transition: изменяемое_свойство время.
Например transition: width .4s; или transition: all 1s;
https://html5book.ru/css3-transition/

Comments

[Exploding]

Не обязательно указывать свойство. По-умолчанию, оно определено как "all". Обязательный параметр - только время.

[Евгений]

Да. Но так ведь лучше. :)