Skip to main content
se eliminaron 76 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24
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 targetcurrentTarget
       // el elemento que generoasociado elal evento
       // se lo pasamos a jquery y elegimos el siguiente elemento p
  hijo  
     self = jQuery(eevent.targetcurrentTarget).nextfind("p""p[id^='item']").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>
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>
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 currentTarget
       // el elemento asociado al evento
       // se lo pasamos a jquery y elegimos el elemento p hijo  
       jQuery(event.currentTarget).find("p[id^='item']").show()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>
se añadieron 2725 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24
jQuery("#time1"".timeline-step").click(function(e){
       // ocultamos todos los items p que empiense con id item
       jQuery("div[id^='item']""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 loelegimos mostramosel 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="time1">id="wrap">
<div class="timeline-steps aos-init aos-animate" 
 data-aos="fade-up">
                <div id="item1">item1<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">item2<                 <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">item3<         </div>
                <div id="item4">item4<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>
      <div id="item5">item5<                 <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 id="item6">item6<         </div>
                <div id="item7">item7<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>
      <div id="item8">item8<                 <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 id="item9">item9<         </div>
                <div class="timeline-step time4">
                    <div id="item10">item10<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 id="item11">item11<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>
jQuery("#time1").click(function(e){
       // ocultamos todos los items p que empiense con id item
       jQuery("div[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el target
       // el elemento que genero el evento
       // se lo pasamos a jquery y lo mostramos
       self = jQuery(e.target).show()
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="time1">
      <div id="item1">item1</div>
      <div id="item2">item2</div>
      <div id="item3">item3</div>
      <div id="item4">item4</div>
      <div id="item5">item5</div>
      <div id="item6">item6</div>
      <div id="item7">item7</div>
      <div id="item8">item8</div>
      <div id="item9">item9</div>
      <div id="item10">item10</div>
      <div id="item11">item11</div>
    </div>
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>
se eliminaron 4 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

puedes hacerlo asi:

jQuery("div.time1""#time1").click(function(e){
       // ocultamos todos los items divp que empiense con id item
       jQuery("div[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el target
       // el elemento que genero el evento
       // se lo pasamos a jquery y lo mostramos
       self = jQuery(e.target).show()
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="time1">id="time1">
      <div id="item1">item1</div>
      <div id="item2">item2</div>
      <div id="item3">item3</div>
      <div id="item4">item4</div>
      <div id="item5">item5</div>
      <div id="item6">item6</div>
      <div id="item7">item7</div>
      <div id="item8">item8</div>
      <div id="item9">item9</div>
      <div id="item10">item10</div>
      <div id="item11">item11</div>
    </div>

puedes hacerlo asi:

jQuery("div.time1").click(function(e){
       // ocultamos todos los items div que empiense con id item
       jQuery("div[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el target
       // el elemento que genero el evento
       // se lo pasamos a jquery y lo mostramos
       self = jQuery(e.target).show()
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="time1">
      <div id="item1">item1</div>
      <div id="item2">item2</div>
      <div id="item3">item3</div>
      <div id="item4">item4</div>
      <div id="item5">item5</div>
      <div id="item6">item6</div>
      <div id="item7">item7</div>
      <div id="item8">item8</div>
      <div id="item9">item9</div>
      <div id="item10">item10</div>
      <div id="item11">item11</div>
    </div>

puedes hacerlo asi:

jQuery("#time1").click(function(e){
       // ocultamos todos los items p que empiense con id item
       jQuery("div[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el target
       // el elemento que genero el evento
       // se lo pasamos a jquery y lo mostramos
       self = jQuery(e.target).show()
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="time1">
      <div id="item1">item1</div>
      <div id="item2">item2</div>
      <div id="item3">item3</div>
      <div id="item4">item4</div>
      <div id="item5">item5</div>
      <div id="item6">item6</div>
      <div id="item7">item7</div>
      <div id="item8">item8</div>
      <div id="item9">item9</div>
      <div id="item10">item10</div>
      <div id="item11">item11</div>
    </div>

Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24
Loading