I made a timeline using HTML and CSS and I need to add a story every year when I clicked on a particular year of the line displaying the story it contains that year, how do I do that?
.DB_Timeline {
padding: 0;
margin: 0 auto;
list-style: none;
display: flex;
align-items: flex-start;
justify-content: center;
width: 1141px;
max-width: 100%;
}
.DB_Timeline__item {
position: relative;
border-right-width: 1px;
border-right-style: solid;
border-color: currentColor;
padding: 0 12px;
color: #d12129;
}
.DB_Timeline__item:after {
content: "";
position: absolute;
left: 100%;
display: block;
width: 0;
height: 0;
border-style: solid;
}
.DB_Timeline__item:nth-child(3n+2) {
color: #282828;
}
.DB_Timeline__item:nth-child(3n+3) {
color: #8d8e8d;
}
.DB_Timeline__item:nth-child(odd) {
border-bottom-width: 6px;
border-bottom-style: solid;
padding-bottom: 80px;
margin-bottom: 1em;
}
.DB_Timeline__item:nth-child(odd):after {
top: 0;
border-width: 12px 12px 0 0;
border-color: currentColor transparent transparent transparent;
}
.DB_Timeline__item:nth-child(even) {
border-top-width: 6px;
border-top-style: solid;
padding-top: 80px;
margin-top: calc(1em + 80px);
}
.DB_Timeline__item:nth-child(even):after {
bottom: 0;
border-width: 12px 0 0 12px;
border-color: transparent transparent transparent currentColor;
}
.DB_Timeline__text {
display: block;
line-height: 1;
}
<ul class="DB_Timeline">
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">1998</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2000</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2001</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2002</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2003</span></li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2005</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2007</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2010</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2011</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2014</span>
</li>
<li class="DB_Timeline__item">
<span class="DB_Timeline__text">2017</span>
</li>
</ul>
O texto ficaria aqui