CODEWITHSUNDEEP
javascriptjquery
jrodr
jrodr

Reputation: 45

Use jQuery .click() function with an individual element

I want to show the list of tags on an Tumblr blog only when the user clicks on the tags button. For that I use this HTML and jQuery.

HTML

  <span class="tags-link">Tags</span>
  <ul class="tags">
    <li> <a href="{TagURL}">{Tag}</a> </li>
  </ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

Every time I click on the .tags-link every .tagsshows up on the page, and I only want the ones of the post where the user has clicked to be shown. I recently started learning jQuery and I'm a little lost here...

Upvotes: 2

Views: 72

Answers (3)

Rachel H.
Rachel H.

Reputation: 126

You can set a data attribute on both the span with class "tags-link" and the ul with class "tags". Then when you click the ".tags-link" element, it will show the ".tags" element with the same data attribute.

For example:

HTML 

<span class="tags-link" data-id="1">Tags</span>
<ul class="tags" data-id="1">
  <li> <a href="{TagURL}">{Tag}</a> </li>
</ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        var id = $(this).attr('data-id');
        $(".tags[data-id='" + id + "']").slideDown(700, function(){
            //end animation
        });
    });
});

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You need to target the tags that is the next adjacent element only:

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(this).next(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

Upvotes: 2

Matthias
Matthias

Reputation: 637

You can use .next() http://api.jquery.com/next/

$(this).next(".tags").slideDown(700, function(){

Upvotes: 5

Related Questions