Alpine.jsでAccordionを実装

作成日 2020.12.14
Alpine.js
Alpine.js

JavaScriptフレームワークの1つであるAlpine.jsを導入して、Accordionを実装するサンプルコードを記述してます。

1. 環境
2. Alpine.js導入
3. Accordionを実装

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105
Alpine.js 2.7.3

windows10にApacheのインストール

Alpine.js導入

CDNから読み込んで利用します。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

Accordionを実装

「x-for・x-show・x-text・x-data」ディレクティブを使用して、Accordionを実装してます。
CSSにtailwindを使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body>
    <div class="container mx-auto my-56 w-2/5 px-2 py-2" x-data="{
              faqs: [
                  {
                      question: 'question1',
                      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
                      isOpen: true,
                  },
                  {
                      question: 'question2',
                      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
                      isOpen: false,
                  },
                  {
                      question: 'question3',
                      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
                      isOpen: false,
                  },
              ]
          }">
      <h2 class="text-2xl font-bold">FAQs</h2>
      <div class="leading-loose text-lg mt-6">

        <template x-for="faq in faqs" :key="faq.question">
          <div>
            <button class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
              @click="faqs = faqs.map(f => ({ ...f, isOpen: f.question !== faq.question ? false : !f.isOpen}))">
              <div x-text="faq.question"></div>
              <svg x-show="!faq.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
                <path class="heroicon-ui"
                  d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z" />
                </svg>
              <svg x-show="faq.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
                <path class="heroicon-ui"
                  d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z" />
                </svg>
            </button>
  
            <div class="text-gray-700 text-sm mt-2" x-text="faq.answer" x-show="faq.isOpen"></div>
          </div>
        </template>
  
      </div>
    </div>
  </body>

</html>

実行結果を確認すると「Accordion」が実装されていることが確認できます。