Accordion
Collapsible content sections
Preview
Content 1
Content 2
Props Editor
Source Code
defmodule FeenixUiWeb.Components.AccordionComponent do use Phoenix.Component def render(assigns) do assigns = assign_new(assigns, :items, fn -> [] end) ~H""" <div class="space-y-2"> <%= for item <- @items do %> <div class="border border-gray-200 rounded-lg"> <button class="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset rounded-t-lg"> <div class="flex items-center justify-between"> <span class="font-medium text-gray-900"><%= item.title %></span> <svg class="w-5 h-5 text-gray-500 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </div> </button> <div class="px-4 py-3 bg-white rounded-b-lg"> <p class="text-gray-700"><%= item.content %></p> </div> </div> <% end %> </div> """ end end