show tags for just one tumblr post on click (jquery)

Question

So I'm using jQuery to make these sliding tags that are shown on click on Tumblr, but my problem is that I don't know how to use the script so on click only the tags for that clicked-on post are shown. I'm using an icon font, there's one on every post, but when you click it all the tags for every post are shown.

.tags {display: none;}

<div class="post-controls">
        <a class="slide-tags"><span class="th th-bookmark-1"></span></a>
        <a href="{ReblogURL}" target="_blank"><span class="th th-reblog"></span></a>
        <a class="likeb" href="#">{LikeButton}<span class="actual-button"><span class="th th-heart-1-o"></span></span></a>

(So above the bookmark icon is what's clicked on to show the tags) And below is the script itself.

<script>
    $(document).ready(function() {
        $(".slide-tags").click(function() {
            $(".tags").slideToggle();
        });
    });
</script>

You can go to the account here and actually click on it yourself and see what I mean (just click on the little bookmark next to the like and reblog buttons).

Answer 1

You need to set up a call to the current $(this) selector, while the rest will be removed from the display, using the slideUp() method.

$(document).ready(function () {
    $(".slide-tags").click(function () {
        $(".tags").slideUp();
        $(this).closest(".posts").find(".tags").slideToggle();
    });
});