Skip to main content
se añadieron 3369 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
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>
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>
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(".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...
  childs.find('[id^="item"]').hide(); 

  // Obtenemos la posición del elemento click-eado
  let pos = jQuery(this).index(); 

  // Mostramos los "item" en los hermanos hasta llegar al click-eado
  for (let i = 0; i <= pos; i++) childs.eq(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 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>
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

Podrías usar:

Ejemplo:

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>