Accordion: Auto Close

{{!-- Accordion that Automatically Closes  --}}
{{!-- The initial openedIndex value determines which accordion is open at first. It can be set to 0 for all accordions to be closed initially --}}
{{!-- Uses Font Awesome for icons --}}

<div x-data="{ openedIndex: 0 }" class="flex flex-col p-4">

  <div @click="openedIndex == 1 ? openedIndex = -1 : openedIndex = 1" class="flex items-center justify-between p-4 cursor-pointer bg-gray-200 hover:bg-gray-300 border">
    <p>Question 1</p>
    <span :class="openedIndex == 1 ? 'fa-chevron-down' : 'fa-chevron-up'" class="fas"></span>
  </div>
  <div x-show.transition.in.duration.200ms="openedIndex == 1" class="p-4 border">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>

  <div @click="openedIndex == 2 ? openedIndex = -1 : openedIndex = 2" class="flex items-center justify-between p-4 cursor-pointer bg-gray-200 hover:bg-gray-300 border">
    <p>Question 2</p>
    <span :class="openedIndex == 2 ? 'fa-chevron-down' : 'fa-chevron-up'" class="fas"></span>
  </div>
    <div x-show.transition.in.duration.200ms="openedIndex == 2" class="p-4 border">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>

  <div @click="openedIndex == 3 ? openedIndex = -1 : openedIndex = 3" class="flex items-center justify-between p-4 cursor-pointer bg-gray-200 hover:bg-gray-300 border">
    <p>Question 3</p>
    <span :class="openedIndex == 3 ? 'fa-chevron-down' : 'fa-chevron-up'" class="fas"></span>
  </div>
    <div x-show.transition.in.duration.200ms="openedIndex == 3" class="p-4 border">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>

</div>

{{!-- Reference: https://davidgrzyb.com/accordion-with-alpine-js-tailwind --}}

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>