Insert text in time line

Asked

Viewed 352 times

0

I made a timeline using HTML and CSS and need to add a story each year when it is clicked on a given year of the line display the story it contains that year, how do I do this?

.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

javascript jquery html css css3

2 answers

1

I would suggest inserting a div hidden in each li with the HTML/text related to each year. By clicking on the year, the contents of the div related is sent to <div id="texto"></div>.

$("ul.DB_Timeline li").on("click",function(){
	$("#texto").html($(this).find("div").html());
});
.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;
}

.DB_Timeline__item div{ display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="DB_Timeline">
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">1998</span>
    <div><p>História de 1998</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2000</span>
    <div><p>História de 2000</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2001</span>
    <div><p>História de 2001</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2002</span>
    <div><p>História de 2002</p></div>
  </li>
  <li class="DB_Timeline__item">
  	<span class="DB_Timeline__text">2003</span>
    <div><p>História de 2003</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2005</span>
    <div><p>História de 2005</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2007</span>
    <div><p>História de 2007</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2010</span>
    <div><p>História de 2010</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2011</span>
    <div><p>História de 2011</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2014</span>
    <div><p>História de 2014</p></div>
  </li>
  <li class="DB_Timeline__item">
    <span class="DB_Timeline__text">2017</span>
    <div><p>História de 2017</p></div>
  </li>
</ul>

<div id="texto"></div>

  • Vlw for the tip David

0


For this solution, simply build a "tab" structure. Follow an example with jQuery:

$('.DB_Timeline__item').on('click', function() {
  $('#tabs > div:visible').hide();
  $('#tab-' + $.trim($(this).text())).show();
});
.DB_Timeline {
  padding: 0;
  margin: 0 auto 20px 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;
  cursor: pointer;
  padding: 0 12px;
  color: #d12129;
}
.DB_Timeline__item:hover {
  background: #efefef;
}
.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;
}
#tabs > div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<div id="tabs">
  <div id="tab-1998">Texto sobre 1998</div>
  <div id="tab-2000">Texto sobre 2000</div>
  <div id="tab-2001">Texto sobre 2001</div>
  <div id="tab-2002">Texto sobre 2002</div>
  <div id="tab-2003">Texto sobre 2003</div>
  <div id="tab-2005">Texto sobre 2005</div>
  <div id="tab-2007">Texto sobre 2007</div>
  <div id="tab-2010">Texto sobre 2010</div>
  <div id="tab-2011">Texto sobre 2011</div>
  <div id="tab-2014">Texto sobre 2014</div>
  <div id="tab-2017">Texto sobre 2017</div>
</div>

  • Vlw Diego, this helps!

Browser other questions tagged javascript jquery html css css3

You are not signed in. Login or sign up in order to post.