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:

jQuery(document).ready(function() {
    jQuery('#social_trigger').click(function() {

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.

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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