Details Open Binding

isOpen: "false"

Summary

First of all
Second of all

<div 
  x-data="{ isOpen: false }" class="flex flex-col"
>
  <button 
    @click="isOpen = !isOpen" class="mt-10 w-32 justify-center flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  >
    Toggle
  </button>
  <label class="flex">isOpen: "<span x-text="isOpen">false</span>"</label>
  <details :open="isOpen" class="flex mt-4">
    <summary>Summary</summary>
    <ul>
      <li>First of all</li>
      <li>Second of all</li>
    </ul>
  </details>
</div>