How to create accordion tabs using Alpine JS + Tailwindcss

by Nemrut Creative Studio on 09 Aug 2020

The following example will show you how to create the basic accordion tabs using the Alpine JS and tailwindcss.

Write some markup

<div x-data="{active: 1}">
    <div class="bg-black bg-opacity-10 border-b border-white">
        <button x-on:click.prevent="active = 1" x-bind:class="{'bg-opacity-50': active === 1}"
            class="w-full p-4 text-center bg-black text-white focus:outline-none focus:bg-opacity-50">Tab 1</button>
        <div class="p-4" x-show="active === 1" x-transition:enter="transition ease-out duration-300 origin-top"
            x-transition:enter-start="opacity-0 transform scale-y-0"
            x-transition:enter-end="opacity-100 transform scale-y-100">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="bg-black bg-opacity-10 border-b border-white">
        <button x-on:click.prevent="active = 2" x-bind:class="{'bg-opacity-50': active === 2}"
            class="w-full p-4 text-center bg-black text-white focus:outline-none focus:bg-opacity-50">Tab 2</button>
        <div class="p-4" x-show="active === 2" x-transition:enter="transition ease-out duration-300 origin-top"
            x-transition:enter-start="opacity-0 transform scale-y-0"
            x-transition:enter-end="opacity-100 transform scale-y-100">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="bg-black bg-opacity-10 border-b border-white">
        <button x-on:click.prevent="active = 3" x-bind:class="{'bg-opacity-50': active === 3}"
            class="w-full p-4 text-center bg-black text-white focus:outline-none focus:bg-opacity-50">Tab 3</button>
        <div class="p-4" x-show="active === 3" x-transition:enter="transition ease-out duration-300 origin-top"
            x-transition:enter-start="opacity-0 transform scale-y-0"
            x-transition:enter-end="opacity-100 transform scale-y-100">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

That's it. You can style it with your own Tailwindcss configuration.

Copyright ©2020 Nemrut Creative Studio