Vue

by ishikawa

HTML

<div id="app">
    <div class="container">
        <button @click="toggle('1001')">詳細表示①</button>
        <div class="content" v-show="show_contents.indexOf('1001') >= 0">  
            詳細な内容①
        </div>
    </div>
    
    <div class="container">
        <button @click="toggle('1002')">詳細表示②</button>
        <div class="content" v-show="show_contents.indexOf('1002') >= 0">  
            詳細な内容②
        </div>
    </div>
    
    <div class="container">
        <button @click="toggle('1003')">詳細表示③</button>
        <div class="content" v-show="show_contents.indexOf('1003') >= 0">  
            詳細な内容③
        </div>
    </div>

    <div class="container">
        <button @click="toggle('1004')">詳細表示④</button>
        <div class="content" v-show="show_contents.indexOf('1004') >= 0">  
            詳細な内容④
        </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: {
    show_contents: [],
  },
  methods: { 
    toggle: function (data) {
      if (this.show_contents.indexOf(data) >= 0) {
        this.show_contents = this.show_contents.filter(n => n !== data)
      }

      else {
        this.show_contents.push(data)
      }
    }
  }
})