Hola Tengo el siguiente código jQuery para hacer funcionar una linea de tiempo, cumple su función, pero veo que es muy extenso y no se me ha ocurrido una forma de reducirlo soy nuevo en jQuery
jQuery("#item1").show();
jQuery("#item2").hide();
jQuery("#item3").hide();
jQuery("#item4").hide();
jQuery("#item5").hide();
jQuery(".time1").click(function(){
jQuery("#item1").show();
jQuery("#item2").hide();
jQuery("#item3").hide();
jQuery("#item4").hide();
jQuery("#item5").hide();
});
jQuery(".time2").click(function(){
jQuery("#item2").show();
jQuery("#item1").show();
jQuery("#item3").hide();
jQuery("#item4").hide();
jQuery("#item5").hide();
});
jQuery(".time3").click(function(){
jQuery("#item3").show();
jQuery("#item2").show();
jQuery("#item1").show();
jQuery("#item4").hide();
jQuery("#item5").hide();
});
jQuery(".time4").click(function(){
jQuery("#item4").show();
jQuery("#item2").show();
jQuery("#item3").show();
jQuery("#item1").show();
jQuery("#item5").hide();
});
jQuery(".time5").click(function(){
jQuery("#item5").show();
jQuery("#item2").show();
jQuery("#item3").show();
jQuery("#item1").show();
jQuery("#item4").show();
});
/* HTML*/
<div class="timeline-steps aos-init aos-animate"
data-aos="fade-up">
<div class="timeline-step time1">
<div class="timeline-content" data-
toggle="popover" data-trigger="hover" data-placement="top"
title="" data-content="And here's some amazing content. It's
very engaging. Right?" data-original-title="2003">
<div class="inner-circle"></div>
<p class="h6 mt-3 mb-1">2003</p>
<p class="h6 text-muted mb-0 mb-lg-0"
id="item1">Favland Founded</p>
</div>
</div>
<div class="timeline-step time2">
<div class="timeline-content" data-
toggle="popover" data-trigger="hover" data-placement="top"
title="" data-content="And here's some amazing content. It's
very engaging. Right?" data-original-title="2004">
<div class="inner-circle"></div>
<p class="h6 mt-3 mb-1">2004</p>
<p class="h6 text-muted mb-0 mb-lg-0"
id="item2">Launched Trello</p>
</div>
</div>
<div class="timeline-step time3">
<div class="timeline-content" data-
toggle="popover" data-trigger="hover" data-placement="top"
title="" data-content="And here's some amazing content. It's
very engaging. Right?" data-original-title="2005">
<div class="inner-circle"></div>
<p class="h6 mt-3 mb-1">2005</p>
<p class="h6 text-muted mb-0 mb-lg-0"
id="item3">Launched Messanger</p>
</div>
</div>
<div class="timeline-step time4">
<div class="timeline-content" data-
toggle="popover" data-trigger="hover" data-placement="top"
title="" data-content="And here's some amazing content. It's
very engaging. Right?" data-original-title="2010">
<div class="inner-circle"></div>
<p class="h6 mt-3 mb-1">2010</p>
<p class="h6 text-muted mb-0 mb-lg-0"
id="item4">Open New Branch</p>
</div>
</div>
<div class="timeline-step mb-0 time5">
<div class="timeline-content" data-
toggle="popover" data-trigger="hover" data-placement="top"
title="" data-content="And here's some amazing content. It's
very engaging. Right?" data-original-title="2020">
<div class="inner-circle"></div>
<p class="h6 mt-3 mb-1">2020</p>
<p class="h6 text-muted mb-0 mb-lg-0"
id="item5">In Fortune 500</p>
</div>
</div>
</div>
si pueden ayudarme a iterar los elementos para no repetir el código se los agradecería. estaba pensando en un ciclo for ya que estaré controlando los nuevos elementos. la linea de tiempo tiene la siguiente lógica:
- ---- * ----- * ----- * comienza con el primer elemento visible y los otros ocultos cuando le doy click al segundo, queda visible el primero y el segundo y así con todos, lo mismo a dejar oculto. si le doy al primer elemento todos los demas quedaran ocultos.