How with alpine to make accordion with only 1 item opened?

[sergeynilov]

Hello,
In laravel 7 with livewire 1.3 and [email protected] I made accordion like :

    <div class="accordion_wrapper">
    
        @foreach($faqs as $nextFaq)
            <div class="accordion_{{ $nextFaq->id }}" x-data="{ is_opened: false }">
                <button @click="is_opened= !is_opened">
                    <div>Question {{ $nextFaq->id }}</div>
                </button>
                <div class="accordion_content" x-show="is_opened">
                    {{ $nextFaq->id }} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                </div>
            </div>
        @endforeach
    
    </div>

and it works, but how can I make with alpine to have opened only 1 item?
If user clicks on some other items, the rest of items must be closed...

Thanks!

[KevinBatdorf]

You could fire an event on the window that closes all others when clicked.

<div @close-all-faq.stop.window="close()" @click="$dispatch('close-all-faq', '');close()">

https://codepen.io/KevinBatdorf/pen/qBZWPLz

[SimoTod]

You could also move x-data to the parent and store the faq id instead of a boolean.
Your button will set the variable to the current faq id and your x-show will check if the variable matches the current faq id.

[KevinBatdorf]

You can see an example of that approach (for the most part) here 😄