Here's a simplified version of what I'm trying to achieve:
<div class="dropdownMenuWrapper">
<ul class="dropdownMenu">
<li class="dropdownMenuItem"&rt; Menu 1 </li>
<button class="arrow" @click="toggleActive">></button>
</ul>
</div>
<div class="dropdownListWrapper">
<ul class="dropdownList">
<li class="dropdownItem">DropdownItem</li>
<li class="dropdownItem">DropdownItem</li>
<li class="dropdownItem">DropdownItem</li>
</ul>
</div>
I am looking to create a dropdown menu that expands downwards with a smooth transition. The height should increase from 0 to perhaps 100px over a 1s transition.
My idea is to toggle the class of dropdownList. Initially, it will have a class with a height of 0, and when the arrow is clicked, it will switch to another class with a greater height.
Now, my question is: How can I change the class of this element using the click event on the arrow?