ability to force close a accordion item

[olivM]

it's possible to force expanded an item with the 'expanded' attribute
but if the user has manually expanded an item, it's not possible to force close ( from a livewire property )

[jeffchown]

@olivM You can wire:model a property to a flux:accordion.item. In the example snippet (Volt component) below, the button will programmatically toggle the expanded state of the second accordion item:

<?php

use Livewire\Volt\Component;

new class extends Component
{
    public bool $isExpanded = false;

    public function toggleExpanded(): void
    {
        $this->isExpanded = ! $this->isExpanded;
    }
};
?>


<div>
    <flux:button size="sm" wire:click="toggleExpanded">
        Toggle Expanded
    </flux:button>

    <flux:accordion class="mt-6">
        <flux:accordion.item>
            <flux:accordion.heading>What's your refund policy?</flux:accordion.heading>

            <flux:accordion.content>
                If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.
            </flux:accordion.content>
        </flux:accordion.item>

        <flux:accordion.item wire:model="isExpanded">
            <flux:accordion.heading>Do you offer any discounts for bulk purchases?</flux:accordion.heading>

            <flux:accordion.content>
                Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.
            </flux:accordion.content>
        </flux:accordion.item>

        <flux:accordion.item>
            <flux:accordion.heading>How do I track my order?</flux:accordion.heading>

            <flux:accordion.content>
                Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.
            </flux:accordion.content>
        </flux:accordion.item>
    </flux:accordion>
</div>

[sammyaxe]

@jeffchown

Have you ever tried to bind the state of these with url params? No matter what I do it seems they keep getting reset to false.

 #[Url]
 public $accordionGlobalSettings = true;

[jeffchown]

@sammyaxe I hadn't tried that (until now ;)

In order to get the component to respect a #[Url] property on initial render, you need to use :expanded="$isExpanded", for example, my original component edited to use a Url param:

<?php

use Livewire\Attributes\Url;
use Livewire\Volt\Component;

new class extends Component
{
    #[Url(keep: true)]
    public bool $isExpanded = true;

    public function toggleExpanded(): void
    {
        $this->isExpanded = ! $this->isExpanded;
    }
};
?>


<div>
    <flux:button size="sm" wire:click="toggleExpanded">
        Toggle Expanded
    </flux:button>

    <flux:accordion class="mt-6">
        <flux:accordion.item>
            <flux:accordion.heading>What's your refund policy?</flux:accordion.heading>

            <flux:accordion.content>
                If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.
            </flux:accordion.content>
        </flux:accordion.item>

        <flux:accordion.item :expanded="$isExpanded" wire:model.live="isExpanded">
            <flux:accordion.heading>Do you offer any discounts for bulk purchases?</flux:accordion.heading>

            <flux:accordion.content>
                Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.
            </flux:accordion.content>
        </flux:accordion.item>

        <flux:accordion.item>
            <flux:accordion.heading>How do I track my order?</flux:accordion.heading>

            <flux:accordion.content>
                Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.
            </flux:accordion.content>
        </flux:accordion.item>
    </flux:accordion>
</div>

[sammyaxe]

That seems to be a cleaner solution than what I have done - which is I made it so that if model is used it overrides is expanded default.

Thanks for sharing this!

[jeffchown]

You're welcome, @sammyaxe !

Thanks to your question prompting me to experiment, it's something I may use myself in an app or two 👍

[sammyaxe]

@jeffchown I feel this could be improved at lib level though, feels a bit redundant to require setting initial state via :expanded