Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
add comment

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
    
silly me, I always do that :) This works well now, but I lost my jQuery toggle functionality, rather all of the Tweet butons are visible and no longer hidden. When I click the button with a class of .social_trigger it doesn't do anything. Essentially .social_trigger is toggles the visibility of the button, I hid them on each post for design purposes. –  Matt Aug 29 '11 at 21:26
    
You are going to have to rework your jQuery here. Since there are multiple instances of "#tweet_button", it won't know which one to toggle on click. You need to use a different method to select that element. –  tollmanz Aug 29 '11 at 21:32
    
is this along the lines of what i need to do: jQuery(window).load(function() { jQuery('.social_trigger').click(function() { jQuery(this).find('.tweetbutton').toggle(); }); –  Matt Aug 29 '11 at 21:44
    
I figured it out! jQuery(window).load(function() { jQuery('.social_trigger').click(function() { jQuery(this).next().toggle(); }); }); –  Matt Aug 29 '11 at 21:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.