Как сделать аналог slideToggle на JS?

Question

[Илья]

Мобильное меню разворачивается при клике на картинку с помощью функции slideToggle.
Хочу переделать на классы, а с помощью js добавлять или удалять класс. Проблема в том что анимация работает только если height указывать в пикселях, а я хочу чтоб высота блока была равна контенту. К тому же в меню есть ещё подменю которое тоже разворачивается. Подскажите друзья

mobHamburger.onclick = function () {
 if (menuMobile.classList.contains("menu-mobile--open")) {
    menuMobile.classList.remove("menu-mobile--open");
}
  else {
    menuMobile.classList.add('menu-mobile--open');
}
}

.menuMobile {
width: 100%;
height: 0;
transition: all .5s;
}

.menu-mobile--open {
height: 100%;
}

Answer 1

[Дмитрий]

https://jsfiddle.net/6k72se3g/

Answer 2

[s-jet]

У jquery тоже есть slideToggle, к примеру если:

<div class="mobHamburger">
  Картинка
  <div class="menuMobile">
        Подменю с любой высоты
  </div>
</div>

То:

$(".mobHamburger").click(function(){
	$(this).children(".menuMobile").toggleClass("menu-mobile--open").slideToggle("slow");
});

Comments

[Илья]

Немного неверно задал вопрос: хотелось бы навесить именно на классы а js 'ом переключать их

[s-jet]

По хорошему, с точки зрения правильного кода, классы для CSS, атрибуты и id для JS) Меню удобнее и правильнее делать древовидной структурой и ловить просто прямых потомков.

[Илья]

Это я понимаю, так и хочу сделать, но анимация с помощью css не работает в моем коде, вот и хотел узнать как поправить

[s-jet]

Закиньте свой код сюда https://jsfiddle.net/

[Dark Hole]

shelganov: она и не будет работать. Извращайтесь с max-width