<.accordion variant="ghost" open_index={1}>
  <:item heading="Why don't some couples go to the gym?">
    <.p class="text-base leading-7 text-gray-600 dark:text-gray-400">
      Because some relationships don't work out.
      They start strong, but eventually, one partner's enthusiasm just fizzles out. It's like buying a treadmill and using it as a fancy clothes hanger. Love needs cardio too, but not everyone's ready to break a sweat!
    </.p>
  </:item>
  <:item heading="Why did the bicycle fall over?">
    <.p class="text-base leading-7 text-gray-600 dark:text-gray-400">
      Because it was two-tired.
      After all those uphill battles and no gears to change, it just couldn't keep it together anymore. I mean, who wouldn't wobble under that pressure? Sometimes even a bike needs a break… or maybe just a kickstand!
    </.p>
  </:item>
  <:item heading="Why don't scientists trust atoms?">
    <.p class="text-base leading-7 text-gray-600 dark:text-gray-400">
      Because they make up everything.
      Seriously, they can't help but fabricate all the stuff around us. They're like the ultimate storytellers, weaving tales of reality while we're just trying to live in it. They'll have you believing in the periodic table like it's some kind of life hack.
    </.p>
  </:item>
  <:item heading="Why did the tomato blush?">
    <.p class="text-base leading-7 text-gray-600 dark:text-gray-400">
      Because it saw the salad dressing.
      It's hard to stay cool when everyone's watching you mix it up with those fresh greens. The poor tomato wasn't ready for that kind of exposure. A little too much vinaigrette and, well, things get steamy in the kitchen real fast!
    </.p>
  </:item>
  <:item heading="What do you call fake spaghetti?">
    <.p class="text-base leading-7 text-gray-600 dark:text-gray-400">
      An impasta.
      It's always trying to blend in with the real deal, but you can tell something's off. Too much starch, maybe? It tries to twirl around your fork, but you know it's just not the same. Fake pasta: the ultimate culinary con artist!
    </.p>
  </:item>
</.accordion>

        

          <.accordion open_index={0} class="w-full">
  <:item heading="Accordion">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>

  <:item heading="Accordion 2">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>

  <:item heading="Accordion 3">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>
</.accordion>

        

          <.accordion
  class="w-full"
  entries={[%{heading: "Item 1", content: "Content 1"}, %{heading: "Item 2", content: "Content 2"}]}
>
  <:item :let={entry}>
    <.p>
      <%= entry.content %>
    </.p>
  </:item>
</.accordion>

        

          attr(:container_id, :string)
attr(:class, :any, default: nil, doc: "CSS class for parent container")
attr(:entries, :list, default: [%{}])

attr(:js_lib, :string,
  default: PetalComponents.default_js_lib(),
  values: ["alpine_js", "live_view_js"],
  doc: "JavaScript library used for toggling"
)

attr(:open_index, :integer, default: nil, doc: "Index of item to be open at render")
attr(:rest, :global)

slot :item, required: true, doc: "CSS class for parent container" do
  attr(:heading, :string)
end