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.
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?
Use
eq()
method to select jQuery object using index, and useeach()
method to get eachspan
tag