Possible solution for Accordion

[Neophen]

Hey i've done this one ages ago, i've cleaned it up to look like shadcn/ui so you can basically copy paste things from here i can make the elements for ex:

https://play.tailwindcss.com/zk94DHTrbl

No javascript but most likely needs the bellow code to prevent closing on live_view updates

const liveSocket = new LiveSocket('/live', Socket, {
  hooks,
  params: { _csrf_token: csrfToken },
  dom: {
    onBeforeElUpdated: (fromEl: HTMLElement, toEl: HTMLElement) => {
      if (fromEl.hasAttribute('open')) {
        toEl.setAttribute('open', '')
      }

      return true
    }
  }
})

here's the components:

@doc """
<.accordion>
  <.accordion_item>
    <.accordion_trigger group="exclusive">
      Is it accessible?
    </.accordion_trigger>
    <.accordion_content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item>
    <.accordion_trigger group="exclusive">
      Is it styled?
    </.accordion_trigger>
    <.accordion_content>
      Yes. It comes with default styles that matches the other components' aesthetic.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item>
    <.accordion_trigger group="exclusive">
      Is it animated?
    </.accordion_trigger>
    <.accordion_content>
      Yes. It's animated by default, but you can disable it if you prefer.
    </.accordion_content>
  </.accordion_item>
</.accordion>
"""

slot :inner_block, required: true

def accordion(assigns) do
  ~H"""
  <div class="divide-y border-b">
    <%= render_slot(@inner_block) %>
  </div>
  """
end

slot :inner_block, required: true

def accordion_item(assigns) do
  ~H"""
  <div>
    <%= render_slot(@inner_block) %>
  </div>
  """
end

attr :group, :string,
  default: nil,
  doc:
    "Provide this if you want to have exclusive opens, note not widely supported yet https://caniuse.com/mdn-html_elements_details_name"

slot :inner_block, required: true

def accordion_trigger(assigns) do
  ~H"""
  <details name={@group} class="group/accordion peer/accordion">
    <summary class="flex cursor-pointer justify-between py-4 hover:underline">
      <p class="font-medium">
        <%= render_slot(@inner_block) %>
      </p>

      <svg
        class="inline-block h-6 w-6 transition-transform group-open/accordion:rotate-180"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.5"
      >
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>
    </summary>
  </details>
  """
end

slot :inner_block, required: true

def accordion_content(assigns) do
  ~H"""
  <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-open:grid-rows-[1fr]">
    <div class="overflow-hidden">
      <div class="pb-4 text-sm">
        <%= render_slot(@inner_block) %>
      </div>
    </div>
  </div>
  """
end

[kamaroly]

Thanks, @Neophen. Are you able to send a PR for review and merge?

[Neophen]

Not much time but will try!

[bluzky]

Awesome!!! @Neophen, I'm looking for a way to implement accordion without js but still not find any.
Thanks for your solution.

[bluzky]

@Neophen Here is the PR based on your code, I added class attribute to support customization
#61

[bluzky]

merged #61

[Neophen]

@bluzky the name attribute on the details component is important to have exclusive accordions.
Meaning if one in the group is open, the others will be closed:

can i use

[enoonan]

Thanks so much for this! I'm a little surprised I had to manually add the JS since it looks like it was merged a few months ago:

const liveSocket = new LiveSocket('/live', Socket, {
  ...
  dom: {
    onBeforeElUpdated: (fromEl: HTMLElement, toEl: HTMLElement) => {
      if (fromEl.hasAttribute('open')) {
        toEl.setAttribute('open', '')
      }
      return true
    }
  }
})

I'm on version 0.14. Did I miss an install step or something?

[bluzky]

Hi @enoonan, what is your usecase with accordion? When adding accordion, I though it would be rendered once and not update from liveview so I omitted the js code.

[enoonan]

It's an interface that displays some interactive widgety things with buttons that push to liveview. I was having the same issue of my accordions closing when the user would click "approve". The JS snippet @/Neophen posted is very handy - I just misunderstood the comments here and thought it had been merged into the main library, so I was surprised I was even still encountering the issue.