Filament•3mo ago

Builder field - JS to collapse all other blocks groups when a different block is clicked

Hi all I have a project with a builder field and I need to automatically expand a block's fields when a block is clicked, as well as collapse all other open blocks at the same time. The idea is that only one block should ever be expanded at a time and I need to do that without the user clicking any "collapse" / "expand" buttons. It needs to happen automatically when a closed block is clicked. Does anyone know how I could do that? I'm assuming with a little Alpine magic.

2 Replies

awcodes•2mo ago

->collapseAction(function (Action $action) {
                $action
                    ->after(function (array $arguments, Builder $component, $data): void {
   $items = $component->getState();

   Loop over items and if $arguments[‘item’] !== $key then dispatch the collapse command for that component.
})

->collapseAction(function (Action $action) {
                $action
                    ->after(function (array $arguments, Builder $component, $data): void {
   $items = $component->getState();

   Loop over items and if $arguments[‘item’] !== $key then dispatch the collapse command for that component.
})

I’m sure there’s an alpine way to do it to, but I’m on my phone so tough to give code examples.

binaryfire•2mo ago

@awcodes Thanks, will give this a shot! And if you you think of any ideas re: Alpine solutions I'd love to hear them. The more I can do without hitting the server, the better

Gaming

Programming

Builder field - JS to collapse all other blocks groups when a different block is clicked