jQuery(".time").click(function() {
// Ocultamos todos los elemento que tienen id que empieza con "item..
jQuery('[id^="item"]').hide();
// Obtenemos el dato count
let count = parseInt($(this).data('count'));
// Mostramos los items con id igual a "itemX"
for (let i = 1; i <= count; i++) jQuery("#item" + i).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="item1">Item 1</div>
<div id="item2">Item 2</div>
<div id="item3">Item 3</div>
<div id="item4">Item 4</div>
<div id="item5">Item 5</div>
<button class="time" data-count="1">Time 1</button>
<button class="time" data-count="2">Time 2</button>
<button class="time" data-count="3">Time 3</button>
<button class="time" data-count="4">Time 4</button>
Actualización:
Utilizando tu HTML
, podrías hacerlo así:
Ejemplo:
jQuery(".time"timeline-step").click(function() {
// Obtenemos todos los hermanos
let childs = jQuery(this).parent().children();
// Ocultamos todos los elemento que tienen atributo id y que empieza con "item...
jQuerychilds.find('[id^="item"]').hide();
// Obtenemos ella datoposición countdel elemento click-eado
let countpos = parseInt($jQuery(this).dataindex('count'));
// Mostramos los items"item" conen idlos igualhermanos ahasta "itemX"llegar al click-eado
for (let i = 1;0; i <= count;pos; i++) jQuerychilds.eq("#item" + i).find('[id^="item"]').show();
});
// Iniciamos haciendo click en el primero
jQuery('.time1').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="item1">Itemclass="timeline-steps 1<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>
<div id="item2">Item 2< <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 id="item3">Item 3<</div>
<div id="item4">Itemclass="timeline-step 4<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>
<div id="item5">Item 5< <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">
<button class="time" <div class="timeline-content" data-count="1">Time 1</button>toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's
<button class="time"very engaging. Right?" data-count="2">Timeoriginal-title="2005">
2< <div class="inner-circle"></button>div>
<button class="time" <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-count="3">Time 3<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"></button>div>
<button class="time" <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-count="4">Time 4<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"></button>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>