Breaking News: Grepper is joining You.com. Read the official announcement!

open accordion on click v-for vue

Marta Klaptiuk answered on September 8, 2022 Popularity 4/10 Helpfulness 2/10

answer open accordion on click v-for vue

open accordion on click v-for vue

Comment

<template>
  <div id="accordion" class="accordion-container">
    <ul
      v-for="(category, index) in items"
      :key="index"
      class="accordion accordion__trigger"
      :class="{'accordion__trigger_active': visible===index}"
      @click="visible=index"
    >
      <li class="accordion__item">
        {{ category.title }}
        <div class="accordion__content">
          <div class="menu-sub-list" v-show="visible===index">
            <ul class="sub-list">
              <li class="menu-item">{{ category.sub }}</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "trial-page",
  data() {
    return {
      items: [
        {
          title: "Accordion 1",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 2",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 3",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        }
      ],
      visible: null
    };
  }
};
</script>

<style>
.accordion__trigger_active {
  background-color: blue;
  color: white;
}
</style>

Popularity 4/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: accordion click v-for whatever

Link to this answer
Share Copy Link

Contributed on Sep 08 2022

Marta Klaptiuk

0 Answers Avg Quality 2/10

open accordion on click v-for vue

Contents

More Related Answers

open accordion on click v-for vue

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.