New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Accordion inside Livewire modal not working
I’m using Metronic with Laravel + Livewire, and everything works fine in general.
I have an accordion placed inside a Livewire component that renders as a modal. The issue is: when I open the modal, the built-in KTUI accordion JS does not work.
Do I need to reinitialize KTUI when the modal is opened, or is there another recommended approach to make the accordion work inside dynamically rendered modals? If I need to reinitialize KTUI, how can I do it?
Replies (2)
Hi Adam Nielsen
Yes, you need to reinitialize KTUI components after Livewire updates the DOM.
// After Livewire updates
Livewire.hook("message.processed", (message, component) => {
// Re-initialize all KTUI components
KTComponents.init();
});Initialize after modal open
// If using Bootstrap modals
document.addEventListener("shown.bs.modal", function(event) {
const modal = event.target;
const accordions = modal.querySelectorAll("[data-kt-accordion]");
accordions.forEach(element => {
if (!element.hasAttribute("data-kt-accordion-initialized")) {
new KTAccordion(element);
}
});
});Hey thank you. I am using Tailwind. Unfortunately, the
Livewire.hook("message.processed", (message, component) => {
// Re-initialize all KTUI components
console.log("hallo");
KTComponents.init();
});To be more specific, if this is my livewire blade code
<pre lang="html">
<x-modal>
@if($user)
<x-accordion >
@endif
</x-modal>and this is my main page:
<pre lang="html">
<div>
<livewire:modal>
</div>
@push("scripts")
<script>
document.addEventListener("DOMContentLoaded", function () {
Livewire.hook("message.processed", (message, component) => {
// Re-initialize all KTUI components
KTComponents.init();
});
</script>
@endpushThen the modal open on click, and the user is set and then the accordion shows, but the KTUI JS (opening/close) is not working. In fact, I also see no console.log, this means the hook is never triggered. If I remove the `@if($user)` it would work, because the HTML would be there on initial page load, but thats not possible in my case. I have more of those cases, where an accordion or select element appears based on a condition and the JS is no longer working. Help appreciated.
Also, if I run init() after modal opens, is still doesn't work.
Livewire.on("open-info-modal", () => {
console.log("reinit mtgf");
KTComponents.init();
});
