Concepto
Esta función fue creada para EXPEDOC y se basa en el menú desplegable (dropdown) de Bootstrap. Su propósito es ocultar ciertos elementos que no es necesario mostrar todo el tiempo, o simplemente ofrecer la opción de ocultarlos. Podemos ver un ejemplo en Bootstrap:
Para esto, necesitamos importar todas las dependencias para poder usar esta función, lo cual, en mi opinión, realmente no es necesario. Como desarrolladores web, tenemos las herramientas; podemos hacer algo nuevo y mejor.
Resultado
Y este es mi resultado del menú desplegable en JavaScript puro.
Código Fuente
Debido a las limitaciones de CSS3, los valores de altura (height) no permiten animaciones con la propiedad transform. Por ello, la única opción es la propiedad max-height, que sí permite la animación, pero desde CSS no podemos conocer la altura de cada elemento. Por esa razón necesitamos usar JavaScript, y esta es la función:
Para explicarlo: debemos asignar la clase 'button-drop' al botón que abre o cierra el menú desplegable y, a continuación, la clase 'dropdown-element' al contenedor de los elementos que se van a mostrar u ocultar. Si esto se cumple, a cada elemento con la clase 'dropdown-element' se le asignará la propiedad 'max-height' como estilo en línea (inline) en el HTML cuando esté abierto. Si no está abierto, se alterna la clase 'dropdown-active', que contiene ciertas propiedades CSS predefinidas:
Como podemos ver, estas son las propiedades recomendadas para el buen funcionamiento de esta función.
Ver en línea
Puedes ver este código implementado en mi GitHub, en el repositorio dropdown-js-vanilla, y también hay una aplicación desplegada en línea para probarlo. Eres libre de usarlo y mejorarlo si lo deseas.