Concept
This function was created for EXPEDOC, and this was made in relation to dropdown in Bootstrap, for be present to hide certain elements that are not necessary to show all the time or simply for give the option to hide elements. We can have an example in Bootstrap:
For this, we need to import all the dependences for have use of this function, in my opinion, this are really not neccessary. As web developers, we have the tools, we can do something new and better.
Results
And this is my result for dropdown in JavaScript Vanilla.
Source Code
For limitations of CSS3, the height values does not allow animations with transform property. Having this, the unique option is max-height property, this allows the transform animation but we can't know the height size of each element for CSS, for that reason we need to use JavaScript and this is the function:
Explaining this, we need to asign the class 'button-drop' to the button who open or close the dropdown. Following this, to the container target of elements 'dropdown-element'. If this is effective, for each element with the class 'dropdown-element' will be assigned the 'max-height' property in style inline html if is open. If is not open, is toggled the class 'dropdown-active' who contains certains CSS presets properties:
As we can see, there's the recommended properties to the good work of this function.
Online view
You can see this code implemented in my GitHub in the repository dropdown-js-vanilla and also there's an online deployed app for testing it. You are free to use and upgrade if you want.