Issue with Conditional expanded Attribute in Flux Accordion

[zuberkz]

Hi there! 👋

Sorry you hit a problem with Flux.

I'm encountering an issue when conditionally adding the expanded attribute to . Depending on the condition, the attribute should be present or absent, but this approach causes a syntax error in Blade: syntax error, unexpected token "endif".

<div>
    <flux:accordion>
        @if($portfolioGroups)
            @foreach($portfolioGroups as $portfolioGroup)
                <flux:accordion.item {{ $portfolioGroup === $activeGroupId ? 'expanded' : '' }}>
                    <flux:accordion.heading class="!font-bold">{{ $portfolioGroup->title }}</flux:accordion.heading>
                    <flux:accordion.content>
                           Content here
                    </flux:accordion.content>
                </flux:accordion.item>
            @endforeach
        @endif
    </flux:accordion>
</div>

Thank you!

[jeffchown]

@zuberkz You have to set expanded using the :expanded="..." format. I'd also move your @if($portfolioGroups) outside the <flux:accordion> to avoid an empty <flux:accordion></flux:accordion>. Try this:

<div>
    @if($portfolioGroups)
        <flux:accordion>
            @foreach($portfolioGroups as $portfolioGroup)
                <flux:accordion.item :expanded="$portfolioGroup === $activeGroupId">
                    <flux:accordion.heading class="!font-bold">
                      {{ $portfolioGroup->title }}
                    </flux:accordion.heading>

                    <flux:accordion.content>
                           Content here
                    </flux:accordion.content>
                </flux:accordion.item>
            @endforeach
        </flux:accordion>
    @endif
</div>

[jeffchown]

@zuberkz If my above suggestion solved your problem, please don't forget to close this issue.