Vue

by Vince Oveson

HTML

<div id="app">
  <table>
    <tr>
      <th
        v-for="item in items"
        v-text="item.label"
        :class="{ selected: item.id === selectedId }"
        @click="selectItem(item.id)"        
      ></th>
    </tr>
    <tr>
      <td      
        :colspan="items.length"      
        v-for="item in items"
        v-show="item.id === selectedId"
        v-html="item.details"
      ></td>
    </tr>
  </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: null,
    items: [
      {
      	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;
    }
  }
})