Skip to main content
3 de 4
se añadieron 2725 caracteres en el cuerpo
Bryro
  • 9.5k
  • 1
  • 11
  • 24

puedes hacerlo asi:

jQuery(".timeline-step").click(function(e){
       // ocultamos todos los items p que empiense con id item
       jQuery("p[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el target
       // el elemento que genero el evento
       // se lo pasamos a jquery y elegimos el siguiente elemento p
       self = jQuery(e.target).next("p").show()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- agregamos un contenedor -->
<div id="wrap">
<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>
 </div>

Bryro
  • 9.5k
  • 1
  • 11
  • 24