Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi guys, i'm working on a dropdown using tailwind and i would like to add transition for the height property, can you help me please, these is the code:
<div class="bg-gray-900 p-6">
<div x-data="{showDropdown: false}">
<a href=""
class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow"
@click.prevent="showDropdown = ! showDropdown">Dropdown
</a>
<div class="bg-gray-800 pl-4 h-0 overflow-hidden transition-all ease-in-out duration-1000" :class="{'h-auto': showDropdown}">
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
</div>
</div>
<div class="relative" x-data="{showDropdown: false}">
<a href=""
class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow"
@click.prevent="showDropdown = ! showDropdown">Dropdown
</a>
<div class="bg-gray-800 pl-4 h-0 overflow-hidden transition-height ease-in-out duration-1000" :class="{'h-auto': showDropdown}">
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
<a href="" class="block w-full text-gray-400 p-4 my-2 rounded hover:bg-gray-700 hover:shadow">Dropdown Item</a>
</div>
</div>
</div>
Take a look at this tutorial https://www.jesper.dev/posts/creating-a-dropdown-with-alpinejs/ :)
Specifically this part:
x-transition:enter="transition-transform transition-opacity ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-end="opacity-0 transform -translate-y-3"
Hi Braunson, thanks for your answer, this is the exactly effect i want to achieve but like you can see i need to calculate the ScrollHeight of the ul container but tailwind don't provide that class.
<div class="mt-12" x-data="{ show: false }">
<button class="block mb-6" @click="show = ! show">Toggle</button>
<ul class="bg-gray-800 overflow-y-hidden h-0 transition-all ease-in-out duration-500" :class="{'h-48': show}">
<li><a href="" class="block p-4 bg-gray-700 text-gray-200 m-1">Link</a></li>
<li><a href="" class="block p-4 bg-gray-700 text-gray-200 m-1">Link</a></li>
<li><a href="" class="block p-4 bg-gray-700 text-gray-200 m-1">Link</a></li>
<li><a href="" class="block p-4 bg-gray-700 text-gray-200 m-1">Link</a></li>
<li><a href="" class="block p-4 bg-gray-700 text-gray-200 m-1">Link</a></li>
</ul>
</div>
I did it!...
<div x-data="{showDropdown: false}" @click.away="showDropdown = false">
<a href="" class="my-2 py-2 px-2 flex w-full items-center justify-between rounded hover:bg-gray-800 hover:shadow hover:text-gray-200 transition-colors ease-in-out duration-500" :class="{ 'bg-gray-800 shadow text-gray-200': showDropdown }" @click.prevent="showDropdown = ! showDropdown">
<div class="flex items-center">
<span class="mr-4">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21.32 9.55l-1.89-.63.89-1.78A1 1 0 0020.13 6L18 3.87a1 1 0 00-1.15-.19l-1.78.89-.63-1.89A1 1 0 0013.5 2h-3a1 1 0 00-.95.68l-.63 1.89-1.78-.89A1 1 0 006 3.87L3.87 6a1 1 0 00-.19 1.15l.89 1.78-1.89.63a1 1 0 00-.68.94v3a1 1 0 00.68.95l1.89.63-.89 1.78A1 1 0 003.87 18L6 20.13a1 1 0 001.15.19l1.78-.89.63 1.89a1 1 0 00.95.68h3a1 1 0 00.95-.68l.63-1.89 1.78.89a1 1 0 001.13-.19L20.13 18a1 1 0 00.19-1.15l-.89-1.78 1.89-.63a1 1 0 00.68-.94v-3a1 1 0 00-.68-.95zM20 12.78l-1.2.4A2 2 0 0017.64 16l.57 1.14-1.1 1.1-1.11-.6a2 2 0 00-2.79 1.16l-.4 1.2h-1.59l-.4-1.2A2 2 0 008 17.64l-1.14.57-1.1-1.1.6-1.11a2 2 0 00-1.16-2.82l-1.2-.4v-1.56l1.2-.4A2 2 0 006.36 8l-.57-1.11 1.1-1.1L8 6.36a2 2 0 002.82-1.16l.4-1.2h1.56l.4 1.2A2 2 0 0016 6.36l1.14-.57 1.1 1.1-.6 1.11a2 2 0 001.16 2.79l1.2.4zM12 8a4 4 0 104 4 4 4 0 00-4-4zm0 6a2 2 0 112-2 2 2 0 01-2 2z"/>
</svg>
</span>
<span>{{ trans('System') }}</span>
</div>
<span class="transition-all duration-500 ease-in-out transform" :class="{ 'rotate-180': showDropdown }">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"/>
</svg>
</span>
</a>
<div
class="pl-4 overflow-hidden max-h-0 transition-all ease-in-out duration-500"
style="" x-ref="dropdownContainer" x-bind:style="showDropdown ? 'max-height: ' + $refs.dropdownContainer.scrollHeight + 'px' : ''"
>
<a href="" class="my-2 py-2 px-2 flex items-center rounded hover:bg-gray-800 hover:shadow hover:text-gray-200 transition-colors ease-in-out duration-500">
<span class="mr-4">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20.71 16.71l-2.42-2.42a1 1 0 00-1.42 0l-3.58 3.58a1 1 0 00-.29.71V21a1 1 0 001 1h2.42a1 1 0 00.71-.29l3.58-3.58a1 1 0 000-1.42zM16 20h-1v-1l2.58-2.58 1 1zm-6 0H6a1 1 0 01-1-1V5a1 1 0 011-1h5v3a3 3 0 003 3h3v1a1 1 0 002 0V9v-.06a1.31 1.31 0 00-.06-.27v-.09a1.07 1.07 0 00-.19-.28l-6-6a1.07 1.07 0 00-.28-.19.32.32 0 00-.09 0L12.06 2H6a3 3 0 00-3 3v14a3 3 0 003 3h4a1 1 0 000-2zm3-14.59L15.59 8H14a1 1 0 01-1-1zM8 14h6a1 1 0 000-2H8a1 1 0 000 2zm0-4h1a1 1 0 000-2H8a1 1 0 000 2zm2 6H8a1 1 0 000 2h2a1 1 0 000-2z"></path>
</svg>
</span>
<span>{{ trans('Roles') }}</span>
</a>
<a href="" class="my-2 py-2 px-2 flex items-center rounded hover:bg-gray-800 hover:shadow hover:text-gray-200 transition-colors ease-in-out duration-500">
<span class="mr-4">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10.21 14.75a1 1 0 001.42 0l4.08-4.08a1 1 0 00-1.42-1.42l-3.37 3.38-1.21-1.22a1 1 0 00-1.42 1.42zM21 2H3a1 1 0 00-1 1v18a1 1 0 001 1h18a1 1 0 001-1V3a1 1 0 00-1-1zm-1 18H4V4h16z"/>
</svg>
</span>
<span>{{ trans('Permissions') }}</span>
</a>
<a href="" class="my-2 py-2 px-2 flex items-center rounded hover:bg-gray-800 hover:shadow hover:text-gray-200 transition-colors ease-in-out duration-500">
<span class="mr-4">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.3 12.22A4.92 4.92 0 0014 8.5a5 5 0 00-10 0 4.92 4.92 0 001.7 3.72A8 8 0 001 19.5a1 1 0 002 0 6 6 0 0112 0 1 1 0 002 0 8 8 0 00-4.7-7.28zM9 11.5a3 3 0 113-3 3 3 0 01-3 3zm9.74.32A5 5 0 0015 3.5a1 1 0 000 2 3 3 0 013 3 3 3 0 01-1.5 2.59 1 1 0 00-.5.84 1 1 0 00.45.86l.39.26.13.07a7 7 0 014 6.38 1 1 0 002 0 9 9 0 00-4.23-7.68z"/>
</svg>
</span>
<span>{{ trans('Users') }}</span>
</a>
</div>
</div>
Please or to participate in this conversation.