Toggle the visibility of content across your project with a few classes and Alpine js
Link with href Button with data-target
<div x-data="{open:false}"> <p class="flex"> <a x-on:click.prevent="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded-sm leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-hidden focus:ring-0 me-2"> Link with href </a> <button @click="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded-sm leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-hidden focus:ring-0" type="button"> Button with data-target </button> </p> <div x-show="open" x-collapse class="border uajskeiolksb py-3 my-2 dark:border-gray-700"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div>