show hide issue

[toolman]

Hi,

 

I have some show/hide links like this:

 

<a href="javascript:ReverseDisplay('content1')"  class="hide-show-button">show</a>
<a href="javascript:ReverseDisplay('content2')"  class="hide-show-button">show</a>
<a href="javascript:ReverseDisplay('content3')"  class="hide-show-button">show</a>
<a href="javascript:ReverseDisplay('content4')"  class="hide-show-button">show</a>

 

using this code:

 

var click = 0;
$('.hide-show-button').click(function() {
     if(click == 1)
     {
        $(this).html('show');
        $('.hide-show').hide();
        click--;
     }
     else
     {
        $(this).html('hide');
        $('.hide-show').show();
        click++;
     }

});

 

If I click one link, it shows the content and then shows "hide" which is correct. However, if I click another link, it shows the content, but displays "show" until I click it again, so I end up in a strange loop.

 

Is there a way I can have each of the link always display "show" when not collapsed and "hide" when collapsed?

 

Thanks!

[Shiftoii]

Are you making sure that what you're doing for the first link is being done for all of the other links?

[toolman]

Hi,

 

The links are all doing the same thing, but I'm guessing I need to give them IDs to make them act uniquely?

[cyberRobot]

Instead of using the "click" variable, you could test the value of the clicked link. Perhaps the following will help:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
     $('.hide-show-button').click(function() {
          //UPDATE LINK LABEL
          if($(this).html() == 'show') {
               $(this).html('hide');
          } else {
               $(this).html('show');
          }
 
          //RESET OTHER LINK LABELS
          $(this).siblings().html('show');
     });
});
</script>
 
<a href="javascript:;"  class="hide-show-button">show</a>
<a href="javascript:;"  class="hide-show-button">show</a>
<a href="javascript:;"  class="hide-show-button">show</a>
<a href="javascript:;"  class="hide-show-button">show</a>

Note that the code was simplified so that I could produce a working example.