Creating a collapsable component with Alpine

Expected result from code:

This the the whole code for the component:

 1<div x-data="{collapsable: true, collapsed: false}">
 2    <div class="pb-4 sm:flex sm:items-center sm:justify-between">
 3        <h3 class="text-2xl leading-6 font-medium text-gray-800 cursor-pointer" x-on:click="collapsed = !collapsed">
 4            Some title here
 5        </h3>
 6 
 7        <div x-cloak x-show="collapsable" class="mt-3 sm:mt-0 sm:ml-4 cursor-pointer" x-on:click="collapsed = !collapsed">
 8            <span x-show="collapsed">
 9                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
10                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
11                </svg>
12            </span>
13            <span x-show="!collapsed">
14                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
15                  <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
16                </svg>
17            </span>
18        </div>
19    </div>
20 
21    <div
22        x-cloak
23        x-show="!collapsed"
24        x-show="open"
25        x-transition:enter="transition ease-out duration-300 transform origin-top-right"
26        x-transition:enter-start="opacity-0 scale-y-0"
27        x-transition:enter-end="opacity-100 scale-y-100"
28        x-transition:leave="transition ease-in duration-200 transform origin-top-right"
29        x-transition:leave-start="opacity-100 scale-y-100"
30        x-transition:leave-end="opacity-0 scale-y-0"
31        class='overflow-hidden bg-white shadow-sm rounded-md sm:rounded-lg',
32        ])
33    >
34        <div class="m-auto px-4 py-5">
35            Your content here
36        </div>
37    </div>
38</div>