Wie Toggle Text auf show hide mit Javascript

Question

Beispiel

<script type="text/javascript"> 
    function showme(id) { 
     var divid = document.getElementById(id); 
     if (divid.style.display == 'block') divid.style.display = 'none'; 
     else divid.style.display = 'block'; 
    } 
</script> 

<a onclick="showme('widget');" href="#">Show Widget</a> 

<div id="widget" style="display:none;"> 
This is a widget 
</div> 

ich ändern möchten Text Show Widget & Hide Widget ändern. Lassen Sie mich wissen

Demo http://jsfiddle.net/SLcDE/

Answer 1

<script type="text/javascript"> 
    function showme(id, linkid) { 
     var divid = document.getElementById(id); 
     var toggleLink = document.getElementById(linkid); 
     if (divid.style.display == 'block') { 
      toggleLink.innerHTML = 'Show Widget'; 
      divid.style.display = 'none'; 
     } 
     else { 
      toggleLink.innerHTML = 'Hide Widget'; 
      divid.style.display = 'block'; 
     } 
    } 
</script> 

<a id="toggler" onclick="showme('widget', this.id);" href="#">Show Widget</a> 

<div id="widget" style="display:none;"> 
This is a widget 
</div> 

Answer 2

Sie den Text in Ihrem Toggle-Block wie folgt ändern:

<script type="text/javascript"> 
    function showme(id) { 
     var divid = document.getElementById(id); 
     if (divid.style.display == 'block') { 
      divid.style.display = 'none'; 
      $('#toggleDisplay').text('Show Widget'); 
     } 
     else{ 
      divid.style.display = 'block'; 
      $('#toggleDisplay').text('Hide Widget'); 
     } 
    } 
</script> 

<a onclick="showme('widget');" href="#" id="toggleDisplay" >Show Widget</a> 

<div id="widget" style="display:none;"> 
This is a widget 
</div> 

Answer 3

<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
var clicky = document.getElementById("clicky");
if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}
else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";} }
</script>

<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>

<div id="widget" style="display:none;">
This is a widget
</div>