Пояснения:
В следующем разделе для атрибута класса установлено значение «[&>*]:border-b [&>*]:border-b-gray-200 last:[&>*]:border-b-0». Этот класс применяет рамку внизу каждого дочернего элемента, кроме последнего.
div class="[&>*]:border-b [&>*]:border-b-gray-200 last:[&>*]:border-b-0"
Элемент button имеет прослушиватель событий @click, который переключает состояние выбранной переменной. Эта переменная определяется с помощью директивы x-data Alpine.js, которая создает реактивный объект, который может обновляться представлением.
button @click="selected !== 1 ? selected = 1 : selected = null"Далее, когда выбран аккордеон запускается поворот значка с помощью Rotate-45:
span class="text-lg transition-all block" :class="selected === 1 ? 'rotate-45' : ''"
Практика