Liveview + bootstrap accordion

First option would be to add a LiveView Hook that would re-initialize Bootstrap JS on each mounted & update LiveView callback. From Bootstrap docs, it looks like this for V5:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Second option, have you considered using Alpine? You can enhance your LiveView templates with Alpine without the need of phx-update="ignore" and also without the need of hooks manually re-initializing JS libraries due to how it’s set up to work with LiveView (check the end of the section of the previous link).

Basically, you will use Alpine instead of Bootstrap JS code to handle the accordion state for you. Something like:

<div class="accordion accordion-flush p-1" id="blockAccordion"> 
<%= for first_level_item in first_level_items %>
+ <div x-data="{open: false}" id="accordion_<%= first_level_item.id %>" class="accordion-item">
  <h2 class="accordion-header">
+   <button @click="open=!open">
      <%= first_level_item.text %>
    </button>
  </h2>
+ <div x-show="open" x-cloak class="accordion-collapse collapse">
    <div class="accordion-body p-0 m-0">
      <ul class="list-group list-group-flush">
        <%= for second_level_item <- first_level_item.second_level_items do %>
          <%= render_second_level(second_level_item.id, assigns) %>
        <% end %>
      </ul>
    </div>
  </div>
</div>
<% end %>
</div>

• x-data initializes Alpine; we set open to false;
• on button click, it toggles the value;
• the accordion is only displayed when open==true;
• Patrick Thompson’s blog has some great articles on LiveView & Alpine working together;

thanks for your help.

Yes I considered Alpine, but I thought for this project I go the easy path.
It turns out, that there is too much magic happening I do not understand.
I think Bootstrap and LiveView is really nice, if you know what you are doing, … but I don’t.

a LiveView Hook that would re-initialize Bootstrap JS on each mounted & update LiveView callback

I’ll consider this, but I’m not happy with more Javascript stuff going on I don’t understand.

I think I’ll go the Alpine-and-some-CSS-framework-without-JS-path, it’s a little more work, but at least its possible to understand without being a JS-pro.

If all you want to do is keep the bootstrap state through LiveView updates without marking the container with phx-update="ignore", it is possible to use onBeforeElUpdated hook. For example, inside your app.js where the live socket is initialized:

const liveSocket = new LiveSocket('/live', Socket, {
  // ...
  dom: {
    onBeforeElUpdated (from, to) {
      // Clone bs-collapse state
      if (from.classList.contains('collapse') && from.classList.contains('show')) {
        to.classList.add('show');
      }
    },
  },
});