Vue

by Vince Oveson

HTML

<div id="app">
  <table>
    <template v-for="row in rows">
      <tr>
        <th
          v-for="item in row"
          v-text="item.label"
          :class="{ selected: item.id === selectedId }"
          @click="selectItem(item.id)"        
        ></th>
      </tr>
      <tr>
        <td      
          :colspan="row.length"      
          v-for="item in row"
          v-show="item.id === selectedId"
          v-html="item.details"
        ></td>
      </tr>
    </template>
  </table>
</div>

CSS

table {
  padding: 20px;
}
th {
  padding: 10px 20px;
  cursor: pointer;
}
th.selected {
  background-color: lightgray;
}
td {
  padding: 20px;
  background-color: lightgray;
}

Vue

new Vue({
  el: "#app",
  data: {
  	selectedId: 1,
    rows: [
      [
        {
          id: 1,
          label: "Item A",
          details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies vitae massa vel cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum finibus iaculis.'
        },
        {
          id: 2,
          label: "Item B",
          details: 'Mauris placerat, est in finibus consectetur, ligula urna imperdiet velit, vel interdum lacus turpis a nisi. Etiam et neque sed dui maximus posuere.'
        }
      ],
      [
        {
          id: 3,
          label: "Item C",
          details: 'Vivamus consectetur maximus diam tincidunt bibendum. Fusce quis euismod risus.'
        },
        {
          id: 4,
          label: "Item D",
          details: 'Nam convallis diam sit amet purus lacinia, in euismod sem porttitor. Sed magna quam, consequat in aliquet ut, faucibus nec massa.'
        }
      ]
    ]
  },
  methods: {
  	selectItem(id) {
    	this.selectedId = id;
    }
  }
})