JQuery: How to make Show/Hide only works same link name?

Question

I have several comments on a site depending the post and I only want to show/hide the selected comments. I'm having this issue and trying to figure out. When I click on one option, the show/hide works fine but it's also hide or show on ANY others contents BELOW of it. I want the trigger to be able to show/hide ONLY one comment that have clicked.

Does anyone how to make slideToggle() works that way?

Here's the current code:

jQuery(document).ready(function() 
{
    // Slides container Up and Down on click
    jQuery('div.toggle').click(function(event) {

        // Get the ID by removing the '-'
        $getID = event.target.id.split('-');

        // Get the right content 
        $getContent = jQuery("div#content").parent().find("#"+$getID[1]);


        // Check if content exist 
        if ($getContent.length > 0)
            $getContent.slideToggle('slow');

    });
});

**HERE is HTML code: Actually they're in a loop.

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><a href="javascript:;" id="option-view">View Comments /a></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div id="view"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

***Finally, it's WORKING after spending almost a whole day to figure out HOW with trials and errors. Here's the code:

 <div class="toggle"> 
   <ul id="nav">   
    <li><a href="javascript:;" class="option-view" id="option-view">View Comments</a></li>  
    <li><a href="javascript:;" class="option-add" id="option-add">Add Comments</a></li>  
   </ul>

  <div class="content">   
   <div id="view">.......VIEW a comment</div>   
   <div id="add">......Add a COMMENT here!!</div> 
  </div>   

</div>

***JS code:

jQuery(document).ready(function() 
{
    jQuery('.toggle').bind("click", function(event) { 
     $getID = event.target.id.split('-'); 
       //alert($getID)

     jQuery(this).parent().find("#"+$getID[1]).slideToggle('slow');       
       return false; 
    });
});

Thanks to Half-Dead for helping to get right path...

Answer 1

In the absence of more information I'm going to suggest that there may be better ways to handle determining which comments to close. I'll assume that you have some structure such as the following:

<div id="content">
   <div class="post-container">
       <div class="post"> post </div>
       <div><a href="#" class="toggle">Toggle Comments</a></div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
   </div>
   <div class="post-container">
     ...
   </div>
   ...
</div>

Then I would implement the toggle comment feature as:

$(function() {
     $('.toggle').click( function() {
         $(this).closest('.post-container')
                .find('.comment')
                .slideToggle('slow');
         return false;
     });
});

The basic idea is to use the DOM structure and relative positioning of the elements in conjunction with CSS class decoration to make it easy to select just those elements that you want to deal with rather than relying on string manipulation and encoding relationships in the ids of the elements. I find that it's almost always easier to rely on structure and class "tagging" than using id manipulation. The code is easier to read and more reliable. It does, however, put a premium on well-structured HTML and appropriate classing of the HTML elements.

Answer 2

Should't something like this work ?

     $('.toggle').bind("click", function() {
         $(this).toggle();
         return false;
     });

or

     $('.toggle').click( function() {
         $(this).toggle();
         return false;
     });

Answer 3

You could just use a css style and switch the id around

$('.comment').click(function(){
    //hide the one that was visible
    $('#current').removeAttr('id');
    //show the one that was clicked
    $(this).attr('id', 'current');
});


div.comment{
     display:none;
}
div#current .comment{
    display: block
}

Answer 4

The problem is that, according to your code, the generated comments all share the same ID. Use a class instead, or make sure you generate unique ID (using the wordpress generated post id) .

So, first, change your html markup to better separate behaviour (javascript) and html code:

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><span  class="viewComment" id="view-345">View Comments </span></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div class="commentContent" id="comment-345"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

Now, the javascript implementing the desired behaviour for this markup would be:

   jQuery(document).ready(function() 
    {
    // first, we hide all comments for javascript-enabled people,
// so the added functionality does not prevent people without 
//javascript from seeing your comments.

$('.commentContent').hide();

        // Slides container Up and Down on click
        jQuery('span.viewComment').click(function(event) {

            // Get the ID by removing the '-'
            $getID = this.id.split('-');

            // Get the right content 
            $getContent = jQuery("#comment-"+$getID[1]);


            // Check if content exist 
            if ($getContent.length > 0)
                $getContent.slideToggle('slow');

        });
    });

You can see a working demo here .

Answer 5

Ok i suppose you are looking to do something like this:

You can play with it here: http://jsbin.com/edahi
the html:

  <!-- post 1 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 1 --> 


  <!-- post 2 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 2 -->

and the js:

$('.toggle').bind("click", function() { 
  $(this).find(".content").toggle();       
  return false; 
});