multiple and dynamic show(); to ul’s

In my blog roll, i need click in a link and then, show a social share menu. but, when i put this:

$(document).ready(function() {
  $("ul.social").hide();

  $("span.link").click(function(){
    $("ul.social").show("slow");
  });
});

whenever i click on span.link, it show’s all ul.social. i need to show just the referent ul.social.

Read More

this is the loop:

          <section class="post-home-content">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?> | <?php bloginfo('name') ?> | <?php bloginfo('description') ?>"><?php the_title(); ?></a></h2>
            <p><?php the_field('sub_titulo'); ?></p>

            <span class="link">Share</span>

            <time class="post-time" datetime="<?php the_time('d-m-Y'); ?> <?php the_time('G:i'); ?>"><?php the_time('d/m/Y'); ?></time>
          </section>

          <ul class="social">
            <li><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></li>
          </ul>

So what to do?

Related posts

Leave a Reply

1 comment

  1. Use eq() method to select jQuery object using index, and use each() method to get each span tag

    $(document).ready(function() {
        $("ul.social").hide();
        $("span.link").each(function(i) {
            $(this).click(function() {
                $("ul.social").eq(i).show("slow");
            });
        });
    });