<div
	x-data="{ activeTab: null }" class="bg-white shadow">
	<!-- Item 1 -->
	{% for nest in nested %}
		<div class="border-b">
			<button x-on:click="activeTab = (activeTab === {{loop.index}}) ? null : {{loop.index}}" class="w-full px-4 py-3 flex justify-between items-center text-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
				<span class="font-medium text-gray-800">{{nest.section_title}}</span>
				<svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': activeTab === 1 }" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<polyline points="6 9 12 15 18 9"></polyline>
				</svg>
			</button>

			<div x-show="activeTab === {{loop.index}}" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="px-4 pb-4">
				<p class="text-gray-600">{{nest.section_content}}</p>
			</div>
		</div>

	{% endfor %}
</div>
