Help Needed: Livewire Collapsible Sections Not Working as Expected

[abbasmashaddy72]

Package

Other

Package Version

v3.2.0

How can we help you?

I want to create a dynamic collapsible section using Livewire and Alpine.js, but it's not working as expected. Here is what I'm trying to achieve:

Livewire Component

I have a Livewire component that manages the state of which section is open. By default, section 1 is open. The toggleSection method should open the clicked section and close any other open section.

<?php

namespace App\Livewire;

use Livewire\Component;

class CollapsibleSections extends Component
{
    public $openSection = 1; // By default, section 1 is open

    public function toggleSection($section)
    {
        if ($this->openSection === $section) {
            $this->openSection = null; // Close the currently open section if clicked again
        } else {
            $this->openSection = $section; // Open the clicked section and close others
        }
    }

    public function render()
    {
        return view('livewire.collapsible-sections');
    }
}

Blade Template

I have a Blade template that dynamically generates sections. Each section should toggle its visibility when clicked. Here is the code for the Blade template:

<div>
    <section class="relative py-16 md:py-24">
        @php
            $sections = [
                [
                    'id' => 1,
                    'title' => 'User details 1',
                    'content' => 'Content 1',
                    'icon' => 'heroicon-m-user',
                    'iconSize' => 'sm',
                ],
                [
                    'id' => 2,
                    'title' => 'User details 2',
                    'content' => 'Content 2',
                    'icon' => 'heroicon-m-user',
                    'iconSize' => 'md',
                ],
                // Add more sections as needed
            ];
        @endphp

        @foreach ($sections as $section)
            <div class="mb-4">
                <x-filament::section 
                    :icon="$section['icon']" 
                    :icon-size="$section['iconSize']" 
                    collapsible 
                    :collapsed="$openSection !== $section['id']"
                    x-data="{ isCollapsed: $wire.entangle('openSection').defer !== {{ $section['id'] }} }">
                    <x-slot name="heading">
                        <div @click="$wire.toggleSection({{ $section['id'] }})">
                            {{ $section['title'] }}
                        </div>
                    </x-slot>
                    <div>
                        {{ $section['content'] }}
                    </div>
                </x-filament::section>
            </div>
        @endforeach
    </section>
</div>

Problem

The current behavior is not as expected. When I click on one section, it opens, but clicking on another section doesn't close the previously opened section correctly. Specifically:

1. When clicking on Section 1, it opens as expected.
2. When clicking on Section 2, it also opens, but Section 1 remains open.
3. When clicking on Section 1 again, it closes, but clicking on Section 2 again causes both sections to close.

I want the behavior to be such that only one section is open at a time, and clicking on an already open section closes it. Any guidance on how to achieve this correctly would be greatly appreciated.

[bahaa-almahamid]

You need and id on the section
<x-filament::section collapsible collapsed persist-collapsed id="your-id-here"