Question

Ok not sure why I tried using clossest class in jQuery but still not luck, basically I have a DIV class called SHARE attached to each ARTICLE(POST) for my blog, now when I or any one clicks share I wish for the hidden LI to show-up with additional function ex; facebook, twitter and email sharing.

I made this script which does the trick

$j(".share").live("click", function() {
         $j("li").toggle("slow");
});

but the problem with above code bit is that it will display all hidden LI elements for all articles how would I go about attaching it to single one?

The code is attached to DIV element inside class=”article” as such

        <div class="date">$article_d<br><span>$article_m</span></div>
        <div class="share">share
             <ul>
             <li style="margin-left: 5px;display: none;">
                 <a href="$facebook_share">$facebook_share_img</a>
             <a href="$twitter_share">$twitter_share_img</a>
             <a href="$email_share">$email_share_im</a>
             </li>
             </ul>
        </div>

P.S. please ingore $j syntax since I am using jQuery with Mootools

Answer 1

$j(".share").live("click", function() {
   $j(this).find("li").toggle("slow");
});

The find method will select any li element within the clicked div. As the li elements in your example are descendants of the clicked div, this should work fine.

However, note that if you have any other li elements within the div, they will be affected too.

Here’s a working example.