Accordion Anatomy

    <.accordion
  class="accordion"
  items={
Corex.Content.new([
  %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])
  }
/>

  

    <.accordion
  class="accordion"
  items={
Corex.Content.new([
  %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])
  }
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

  

    <.accordion
  class="accordion"
  items={
Corex.Content.new([
  %{
    label: "Lorem ipsum dolor sit amet",
    content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.",
    meta: %{indicator: "hero-arrow-long-right", icon: "hero-chat-bubble-left-right"}
  },
  %{
    label: "Duis dictum gravida odio ac pharetra?",
    content: "Nullam eget vestibulum ligula, at interdum tellus.",
    meta: %{indicator: "hero-chevron-right", icon: "hero-device-phone-mobile"}
  },
  %{
    label: "Donec condimentum ex mi",
    content: "Congue molestie ipsum gravida a. Sed ac eros luctus.",
    meta: %{indicator: "hero-chevron-double-right", icon: "hero-phone"}
  }
])
  }
>
  <:trigger :let={item}>
    <.heroicon name={item.meta.icon} />{item.label}
  </:trigger>
  <:content :let={item}>
    <p>{item.content}</p>
  </:content>
  <:indicator :let={item}>
    <.heroicon name={item.meta.indicator} />
  </:indicator>
</.accordion>

  

    <.accordion class="accordion" value="lorem">
  <:trigger value="lorem">
    <.heroicon name="hero-chat-bubble-left-right" /> Lorem ipsum dolor sit amet
  </:trigger>
  <:content value="lorem">
    <p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p>
  </:content>
  <:indicator value="lorem">
    <.heroicon name="hero-chevron-right" />
  </:indicator>

  <:trigger value="duis">
    <.heroicon name="hero-device-phone-mobile" /> Duis dictum gravida odio ac pharetra?
  </:trigger>
  <:content value="duis">
    <p>Nullam eget vestibulum ligula, at interdum tellus.</p>
  </:content>
  <:indicator value="duis">
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

  

    <.accordion :let={ctx} compound class="accordion">
  <.accordion_root ctx={ctx}>
    <.accordion_item :let={item} ctx={ctx} value="lorem">
      <.accordion_trigger item={item}>
        Lorem ipsum dolor sit amet
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p>
      </.accordion_content>
    </.accordion_item>
    <.accordion_item :let={item} ctx={ctx} value="duis">
      <.accordion_trigger item={item}>
        Duis dictum gravida odio ac pharetra?
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Nullam eget vestibulum ligula, at interdum tellus.</p>
      </.accordion_content>
    </.accordion_item>
    <.accordion_item :let={item} ctx={ctx} value="donec">
      <.accordion_trigger item={item}>
        Donec condimentum ex mi
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Congue molestie ipsum gravida a. Sed ac eros luctus.</p>
      </.accordion_content>
    </.accordion_item>
  </.accordion_root>
</.accordion>