Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
How to use KTUI accordion with Livewire and Forms?
I am using the KTUI accordion https://ktui.io/docs/accordion
When I put a form inside the accordion and use livewire, then livewire refreshes the page once I make a change in the select and the accordion looses its active state. How can I fix that?
Replies (2)
Hi Adam Nielsen
Sorry for the delay. The cleanest solution is to use Livewire's wire:ignore.self directive on the accordion container. This tells Livewire to ignore DOM changes within that element, preserving the accordion's state:
<div data-kt-accordion="true" class="kt-accordion" wire:ignore.self>
<div data-kt-accordion-item="true" class="kt-accordion-item">
<button
data-kt-accordion-toggle="true"
aria-controls="accordion_content_1"
class="kt-accordion-toggle"
>
<span class="kt-accordion-title">Form Section</span>
<span aria-hidden="true" class="kt-accordion-indicator">
<!-- Your indicator icons -->
</span>
</button>
<div
class="kt-accordion-content hidden"
aria-labelledby="accordion_toggle_1"
>
<div class="kt-accordion-wrapper">
<!-- Your form content here -->
<select wire:model="yourProperty">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</div>
</div>Okay I found a solution, I have to manage the classes active and hidden via the livewire component manually. If there is a better solution, let me know.
