Accordion

Collapsible content sections

Preview

Content 1

Content 2

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

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