Jquery: show hide toggle

JavaScript
1

jQuery Code:


$('#toggleButton').click(function(){
   $('#disclaimer').toggle('slow');

if ($('#disclaimer').is(':visible')) {
	  $(this).text('Show Disclaimer'); 
		return false;
} else {
	  $(this).text('Hide Disclaimer');
		return false;
	
}

html


<a href="" id="toggleButton">Show Disclaimer</a>
      <p id="disclaimer">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>

Clicking the link toggles the visibility of the Disclaimer, but it does not toggle the text of the a#toggleButton. How can I make this work?

2

The other way, toggle is still processing when the if…else is called, so the text is always visible.

3

Thank you for the fix.
It works now. :cool:

But just curious why it does not work the other way.

Click
toggles disclaimer visibility
so now the test for psuedo selector :visible becomes false
set text to “Show Disclaimer”

4

Like this:

$('#toggleButton').click(function(){
        if ($('#disclaimer').is(':visible')) {
            $(this).text('Show Disclaimer'); 
        } else {
            $(this).text('Hide Disclaimer');
        }
    $('#disclaimer').toggle('slow');
    return false;
});