Creating an Interactice timeline in Vue Js - vue.js

Question

I am creating an interactive Timeline in Vue.js and have a base code set up. What currently happens is when you select a year, content shows up but to make it disappear you need to click it again.
What I am trying to do is make the content of the previous year disappear when you click another year.
The Codepen I created is linked below:
Vue JS Timeline
As you can see, my Vue JS code has different set ups for showing the data.
var vue = new Vue({
el:"#app",
data: {
nowShowing: false,
nowShowing2: false,
nowShowing3: false,
nowShowing4: false,
isShowing:false,
message: 'test1',
message2: 'test2',
message3: 'test3',
message4: 'test4',
message5: 'test5',
}});
Then going into the HTML you have a button class
<button class="c-History__year" #click="isShowing ^= true">1880</button>
And the div class:
<div v-show="isShowing">
<p class="c-History__summary">
{{message}}
</p>
</div>
Is this possible to complete in Vue with transitioning or would CSS suffice?

Answer 1

I've bundled all the isShowing variables into just one and the divs are now looking for whether the isShowing var has a specific number and when does, the div will be shown and all others will be hidden.
JS:
const vue = new Vue({
el:"#app",
data: {
showing: -1,
message: 'test1',
message2: 'test2',
message3: 'test3',
message4: 'test4',
message5: 'test5',
},})
HTML:
<div id="app">
<div class="o-Container o-Container--padded">
<div class="c-History">
<div class="c-History__timeline">
<div class="c-History__years">
<span class="c-History__line"></span>
<button class="c-History__year" #click="showing = 0">1880</button>
<button class="c-History__year" #click="showing = 1">1938</button>
<button class="c-History__year" #click="showing = 2">1971</button>
<button class="c-History__year" #click="showing = 3">1982</button>
<button class="c-History__year" #click="showing = 4">2007</button>
</div>
</div>
</div>
<transition name="bounce">
<div v-show="showing == 0">
<p class="c-History__summary">
{{message}}
</p>
</div>
</transition>
<transition name="bounce">
<div v-show="showing == 1">
<p class="c-History__summary">
{{message2}}
</p>
</div>
</transition>
<transition name="bounce">
<div v-show="showing == 2">
<p class="c-History__summary">
{{message3}}
</p>
</div>
</transition>
<transition name="bounce">
<div v-show="showing == 3">
<p class="c-History__summary">
{{message4}}
</p>
</div>
</transition>
<transition name="bounce">
<div v-show="showing == 4">
<p class="c-History__summary">
{{message5}}
</p>
</div>
</transition>
</div>
</div>
</div>

Answer 2

You can do it with a different a simpler approach, first you can change your data structure like this:
var vue = new Vue({
el:"#app",
data: {
message: 'test1',
message2: 'test2',
message3: 'test3',
message4: 'test4',
message5: 'test5',
contentToShow: ''
},
methods: {
showContent(messageIndex) {
this.contentToShow = this[messageIndex]
}
}
})
the idea is to have a method where you are going to pass the index of message property, and set only one visible contentToShow
So your component updated will be
<div id="app">
<div class="o-Container o-Container--padded">
<div class="c-History">
<div class="c-History__timeline">
<div class="c-History__years">
<span class="c-History__line"></span>
<button class="c-History__year" #click="showContent('message')">1880</button>
<button class="c-History__year" #click="showContent('message2')">1938</button>
<button class="c-History__year" #click="showContent('message3')">1971</button>
<button class="c-History__year" #click="showContent('message4')">1982</button>
<button class="c-History__year" #click="showContent('message5')">2007</button>
</div>
</div>
</div>
<transition name="bounce">
<div v-show="contentToShow">
<p :key="contentToShow" class="c-History__summary">
{{contentToShow}}
</p>
</div>
</transition>
</div>
</div>
</div>