переформулируй, ато не понятно. у тебя вложенность ul > li > input + label. как ты хочешь чтобы выезжало заезжало?)

Чё. как всегда без меня не можете решить ничо. Да ?))

или макет покаж)

вот грубо говоря такая вложенность. Вложенный в li ul изначально скрыт. При выборе чекбокса вложенный в li ul показывается или скрывается

то есть я выбираю объем и выезжает ul

внутреннему списку сделать transform: scale(0). по клику добавляй ему класс .open и делай scale(1). как вариант

нет

потому что тогда он остается в структуре

event => animationend => this.classlist. add remove toogle мб пригодится

ну тогда он уезжает быстро

без анимации

scale 0 он считай невидим

но без dispaly none там пустое место остается

давай кодпен с заготовкой

в голове трудно воображать)

Element.prototype.fadeIn = function (time) {
               var dt = 40,
                   step = time / dt,
                   opacity = 0,
                   height = 0;
               fadeStep = 1 / step,
                   self = this;
               var interval = setInterval(function () {
                   self.style.display = "block";
                   self.style.opacity = opacity;

                   self.style.height = opacity * 100 + 'px';

                   opacity += fadeStep;

                   if (opacity >= 1) {
                       clearInterval(interval);
                       self.style.height = 'auto';
                   };

               }, dt)
           };
           Element.prototype.fadeOut = function (time) {
               var dt = 40,
                   step = time / dt,
                   opacity = 1,
                   height = this.clientHeight;

               fadeStep = 1 / step,
                   self = this;
               var interval = setInterval(function () {
                   self.style.opacity = opacity;
                   self.style.height = opacity * height + 'px';
                   self.style.overflow = 'hidden';
                   opacity -= fadeStep;
                   if (opacity <= 0) {
                       clearInterval(interval);
                       self.style.display = "none";
                       self.style.opacity = "";
                   };

               }, dt)
           };
           var flag;
           Element.prototype.fadeToggle = function (time) {
               var dt = 40,
                   step = time / dt,
                   opacity = 1,
                   height = this.clientHeight,

                   fadeStep = 1 / step,
                   self = this;
               var fadeOut = function () {
                   var interval = setInterval(function () {
                       self.style.opacity = opacity;
                       self.style.height = opacity * height + 'px';
                       self.style.overflow = 'hidden';
                       opacity -= fadeStep;
                       if (opacity <= 0) {
                           clearInterval(interval);
                           self.style.display = "none";
                           self.style.opacity = "";
                           flag = false;
                       };

                   }, dt)
               };
               var fadeIn = function () {
                   var interval = setInterval(function () {
                       self.style.display = "block";
                       self.style.opacity = opacity;

                       self.style.height = opacity * 100 + 'px';

                       opacity += fadeStep;

                       if (opacity >= 1) {
                           clearInterval(interval);
                           self.style.height = 'auto';
                           flag = true;
                       };

                   }, dt)
               };
               if (flag == undefined) {
                   fadeOut();
               } else if (flag == true) {
                   fadeOut();
               } else {
                   fadeIn();
               }
           };