Why doesn't toogleClass work?

Question

JavaScript

There is such a markup https://codepen.io/pawlek/pen/xYraGG

I'm trying to do the following:

When you click on the button, the gray block should stretch to full screen where previously hidden inputs will be displayed (ideally a slider in which on each slide text + input ).

Faced the following stones:

1. I tried to make an additional hidden block that can be displayed using .click(), but I can't make a normal transition animation from a small block to a large one.

2. I decided to stretch the existing block and display previously hidden elements, but .toogleClass () does not work, but .addClass works fine. And again, it's not clear how to make a beautiful animation.

Help me find the right way to solve this issue.

Answer 1

toggleClass
toggleClass
What exactly doesn't work? And in general, what does "normal / beautiful animation" mean in your understanding?

Answer 2

Your css transition is incorrectly specified. You need to use transition: changeable_property time.
For example transition: width .4s; or transition: all 1s;
https://html5book.ru/css3-transition/