Создание компонента Accordion в Alpine.js

Аккордеон (Accordion) на Alpine.js + Tailwind CSS

Аккордеон — это список секций, которые можно раскрывать или закрывать по клику. Он помогает организовать контент на странице, чтобы не перегружать пользователя лишней информацией.

---

Пример кода

<div x-data="{ openIndex: null }" class="space-y-4">
  <!-- Секция 1 -->
  <div>
    <button 
      @click="openIndex === 1 ? openIndex = null : openIndex = 1" 
      class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
      <span class="font-semibold">Секция 1</span>
      <svg class="w-5 h-5 transform" :class="openIndex === 1 ? 'rotate-180' : 'rotate-0'" 
           xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div x-show="openIndex === 1" x-transition class="mt-2 p-4 bg-gray-50 border rounded-lg">
      <p>Это содержимое для секции 1. Здесь можно разместить любую информацию.</p>
    </div>
  </div>

  <!-- Секция 2 -->
  <div>
    <button 
      @click="openIndex === 2 ? openIndex = null : openIndex = 2" 
      class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
      <span class="font-semibold">Секция 2</span>
      <svg class="w-5 h-5 transform" :class="openIndex === 2 ? 'rotate-180' : 'rotate-0'" 
           xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div x-show="openIndex === 2" x-transition class="mt-2 p-4 bg-gray-50 border rounded-lg">
      <p>Это содержимое для секции 2. Здесь можно разместить любую информацию.</p>
    </div>
  </div>

  <!-- Секция 3 -->
  <div>
    <button 
      @click="openIndex === 3 ? openIndex = null : openIndex = 3" 
      class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
      <span class="font-semibold">Секция 3</span>
      <svg class="w-5 h-5 transform" :class="openIndex === 3 ? 'rotate-180' : 'rotate-0'" 
           xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div x-show="openIndex === 3" x-transition class="mt-2 p-4 bg-gray-50 border rounded-lg">
      <p>Это содержимое для секции 3. Здесь можно разместить любую информацию.</p>
    </div>
  </div>
</div>

---

Как это работает

1. Переменная состояния

   x-data="{ openIndex: null }"
   

   • openIndex хранит номер открытой секции.
   • Если ни одна секция не открыта, openIndex = null.
2. Кнопки для секций

   @click="openIndex === 1 ? openIndex = null : openIndex = 1"
   

   • Если секция уже открыта → закрываем её (openIndex = null).
   • Если закрыта → открываем (openIndex = X).
3. Иконка стрелки

   :class="openIndex === 1 ? 'rotate-180' : 'rotate-0'"
   

   • Стрелка поворачивается вниз при открытии секции и возвращается вверх при закрытии.
4. Содержимое секции

   <div x-show="openIndex === 1" x-transition>...</div>
   

   • x-show управляет видимостью блока с контентом.
   • x-transition добавляет плавное открытие и закрытие.
5. Стилизация
   • Tailwind CSS делает кнопки и блоки аккуратными: белый фон, тень, закругленные углы, отступы.

---

Пример использования

• Клик по заголовку секции → она открывается и показывает содержимое.
• Клик по той же секции → она закрывается.
• Можно открыть только одну секцию одновременно.

---

Итог

• Аккордеон помогает организовать большой объём информации на странице.
• Используя Alpine.js, легко управлять состоянием секций.
• Tailwind CSS позволяет быстро сделать аккуратный и современный вид.