Simple Toggle

<!-- 
This 'trigger' button has two attributes: 
data-click-toggle-target, which defines the element to be toggled, and 
data-click-toggle-duration, which defines the speed of the toggle animation. 
-->

<button 
    class="flex text-xl leading-6" 
    data-click="toggle" 
    aria-expanded="false"
    data-targets=".toggleme"
    data-vars='{ "force3D": "true","autoAlpha": "1","duration": "1"}' 
    
>
    <span>Toggle</span>
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
</button>


<!-- 
The toggle target has a class ('toggleme') that matches the data-click-toggle-target attribute of the button.     
The 'opacity-0' and 'invisible' classes hide the element on page load. 
-->

<p class="invisible p-8 text-xl opacity-0 toggleme bg-p-10">Hello, World!</p>