Vue

by hodca

HTML

<div id="app">
  <div v-for="(item, index) in items" @click="toggleItem(item)" :class="{active: item.isActive}">
     <h1 style="font-weight: bold">{{item.text}}</h1>
     <div v-if="item.isActive" class="item-active">
       <p>{{ lorem }}</p>
     </div>
  </div>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  padding: 20px;
}
.item-active p {
  color: green;
}

Vue

new Vue({
  el: "#app",
  data: {
  	lorem: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    items: [
      { text: "Learn JavaScript", isActive: false },
      { text: "Learn Vue", isActive: false },
      { text: "Play around in JSFiddle", isActive: false },
      { text: "Build something awesome", isActive: false }
    ]
  },
  methods: {
  	toggleItem(item) {
          this.items.forEach((item1) => {
          if(item1.text == item.text){
          		item1.isActive = !item1.isActive; 
          }else{
            item1.isActive = false
            }
          })
        },
  }
})