初心者のための VUE3 入門: Vue.js コンポーネントを使用したアコーディオン エフェクトの作成

npm install -g @vue/cli

vue create accordion-app

<template>
  <div class="accordion">
    <div class="accordion-group" v-for="accordionItem in accordionItems" :key="accordionItem.id">
      <div class="accordion-header" @click="toggleAccordion(accordionItem.id)">
        {{accordionItem.title}}
      </div>
      <div class="accordion-content" :class="{'is-active': accordionItem.isActive}">
        {{accordionItem.content}}
      </div>
    </div>
  </div>
</template>

<style>
.accordion {
  .accordion-group {
    .accordion-header {
      cursor: pointer;
      padding: 1rem;
      background-color: #eee;
      border: 1px solid #ccc;
      font-weight: bold;
    }

    .accordion-content {
      background-color: #fff;
      padding: 1rem;
      border: 1px solid #ccc;
      display: none;

      &.is-active {
        display: block;
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      accordionItems: [
        {
          id: 1,
          title: "Accordion Group 1",
          content:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut fringilla lorem, in consectetur purus. Mauris maximus nisi quis purus consequat aliquet. Morbi elementum cursus mi eget vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra sem vel ex consectetur pharetra. Nulla facilisi."
        },
        {
          id: 2,
          title: "Accordion Group 2",
          content:
            "Donec facilisis libero sapien, quis viverra urna euismod nec. Aenean dignissim fringilla tortor, in aliquam elit bibendum ut. Maecenas et est vel turpis tincidunt suscipit. In hac habitasse platea dictumst. Sed at justo a turpis tristique tincidunt. Nam pharetra tortor eget bibendum fringilla. Donec nec bibendum magna. Mauris sit amet nisl urna. Nunc tempor enim quis metus blandit, in laoreet nisl fringilla."
        },
        {
          id: 3,
          title: "Accordion Group 3",
          content:
            "Ut tempus malesuada purus, vel posuere metus fermentum a. Duis non magna id dui auctor dapibus. Morbi vulputate accumsan iaculis. Fusce eu urna vulputate, bibendum arcu cursus, ornare dolor. Duis elementum ac eros at bibendum. Aliquam aliquam velit vel ante sagittis, vel laoreet leo posuere. Nunc ac urna eleifend, euismod enim sit amet, consectetur erat."
        }
      ]
    };
  },
  methods: {
    toggleAccordion(id) {
      this.accordionItems.forEach(item => {
        if (item.id === id) {
          item.isActive = !item.isActive;
        } else {
          item.isActive = false;
        }
      });
    }
  }
};
</script>

npm run serve