Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

FrogMen's avatar
Level 14

Livewire 3 collapsible special handling

I have an L11 project, where on a registration page user can add persons (name,email,phone). I collect them in an array in the Component. The person boxes could be closed/opened with x-collapse by clicking on a button (only a header visible this time).

If the user adds a new person, prev. person boxes should be collapse, only the new should be open. and if on submit validation error happens, the person's boxes where errors are should be opened.

I tried storing the state in the persons object, but in blade boxes doesn't open if they are "true", it's not enough..

I tried $wire.entangle, with that on error only the boxes with errors opens, great, but... I can not close neither because of the binding between Alpine and Livewire. It tries to open but immediately closes.

Of course I asked multiple AI-s for solution but this complex mechanism no one can reproduce with working code.

The easiest part, opening closing the boxes with Alpine works, but opening them depending which person has error in their fields, and closing them when the user wants, not really. If I can make the collapse with pure Alpine not sure how can I control it with component data..

Any good idea to handle this situation? thanks

0 likes
0 replies

Please or to participate in this conversation.