Toggle other elements on click

[jeffreyvr]

Alpine newbie here.

Let's say you have a FAQ-item, and when you click on it, it expands and shows you the answer. Basic example:

<div x-data="{open: false}">
    <div x-on:click="open = ! open">
        <div>To be or not to be?</div>
        <div x-show="open">
            That is the question.
        </div>
    </div>
</div>

Now I would like to have multiple of those items on a page, but with only one item open at a time. So if you click an FAQ-item, others should automatically close.

I've done some searching but could not find how to achieve this with Alpine. Is this possible? A hint in a particular direction would already be appreciated :)

Edit: Seems to be doing the trick: https://alpinejs.dev/start-here#listening-for-a-click-outside :)

Edit 2:

Or better:

<div x-data="{active: 1}">
  <div x-on:click="active = 1">
    <div>To be or not to be?</div>
    <div x-show="active == 1">
      That is the question.
    </div>
  </div>

  <div x-on:click="active = 2">
    <div>Another question...?</div>
    <div x-show="active == 2">
      Yes.
    </div>
  </div>
</div>

[danddanddand]

There is a tutorial here https://alpinejs.dev/pattern/accordion