Toggle text on button tag

Question

I have a show hide table rows feature but would now like to change my text.

<script language="javascript" type="text/javascript">

function HideStuff(thisname) {
    tr = document.getElementsByTagName('tr');        
    for (i = 0; i < tr.length; i++) {
        if (tr[i].getAttribute('classname') == 'display:none;') {
            if (tr[i].style.display == 'none' || tr[i].style.display=='block' )  {
                tr[i].style.display = ''; 
            }
            else {
                tr[i].style.display = 'block'; 
            }
        }
    }
}

The html is as follows...

<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button>

I want to toggle the "Show/Hide" text. Any ideas?

Answer 1

$('#HideShow').click(function() 
{ 
  if ($(this).text() == "Show") 
  { 
     $(this).text("Hide"); 
  } 
  else 
  { 
     $(this).text("Show"); 
  }; 
});

Alternative, the .toggle() has an .toggle(even,odd); functionality, use which ever makes most sense to you, one is slightly shorter code but perhaps less definitive.

$('#HideShow').toggle(function()  
  {  
   $(this).text("Hide");  
     HideClick('hide');
  },  
  function()  
  {  
     $(this).text("Show"); 
     HideClick('hide'); 
  }  
);  

NOTE: you can include any other actions you want in the function() as needed, and you can eliminate the onclick in the markup/html by calling your HideClick() function call in there. as I demonstrate in the second example.

As a follow-up, and to present an alternative, you could add CSS class to your CSS

.hideStuff
{
display:none;
}

THEN add this in:

.toggle('.hideStuff');

or, more directly:in the appropriate place.

.addClass('.hideStuff');
.removeClass('.hideStuff');