Vue

by ishikawa

HTML

<div id="app">
    <div class="container">
        <button @click="active">詳細表示①</button>
        <div class="content" v-if="isActive">  
            詳細な内容①
        </div>
    </div>
    
    <div class="container">
        <button @click="active">詳細表示②</button>
        <div class="content" v-if="isActive">  
            詳細な内容②
        </div>
    </div>
    
    <div class="container">
        <button @click="active">詳細表示③</button>
        <div class="content" v-if="isActive">  
            詳細な内容③
        </div>
    </div>

    <div class="container">
        <button @click="active">詳細表示④</button>
        <div class="content" v-if="isActive">  
            詳細な内容④
        </div>
    </div>
</div>

CSS

#app {
  width: 80%;
  margin: 20px auto;
}

.container {
  margin: 20px 0;
}

.content {
  margin: 20px 0 0;
  padding: 8px 12px;
  border: solid 1px #ccc;
}

Vue

new Vue({
  el: "#app",
  data: {
    isActive: false
  },  
  methods: {
    active: function () {
      this.isActive = !this.isActive
    }  
  }
})