Toggle the visibility of content across your project with a few classes and Alpine js

Example

Click the buttons below to show and hide another element via alpine js

			                
			                  <div x-data="{open:false}">
			                    <p class="flex">
			                      <a x-on:click.prevent="open=!open" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 mr-2">
			                      Link with href
			                      </a>
			                      <button  @click="open=!open" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0" type="button">
			                      Button with data-target
			                      </button>
			                    </p> 
			                    <div x-show="open" class="border px-4 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>