Using jQuery toggle() in WordPress post to show/hide Tweet button?

Question

What is the appropriate way to use jQuery toggle() function in a WordPress post to show/hide a Twitter "Tweet" button?

The problem I am encountering is when I put the code in my content-post.php, the toggle feature and tweet functionality only work on the first (most recent) post in the stream. How would I go about putting this in the Wordpress loop?

Right now, I am including this code my content-post.php file:

<?php if (!is_singular()) { require('post_buttons.php'); }?>

The above code includes the Tweet button from another file with this toggle code:

<script>
jQuery(document).ready(function() {
    jQuery('#social_trigger').click(function() {
        jQuery('#tweet_button').toggle();
    });
});
</script>

Answer 1

If the element that is being assigned the "click" event is "#social_trigger", you cannot have more than one of these elements per page. You are searching for an "id" of an element and by definition, you can only have one element of a particular id per page.

You should change your elements to have a class of "social_trigger" and then change the jQuery to find ".social_trigger". You'll likely have to rework your function a bit, but this should get you past the issue of only being able to toggle the first element.