SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery toggle question

    Hi all,

    Im currently trying to learn JQuery and hope you can help explain my problem:

    I have a paragraph that I have set to disappear on the click of the Hide button, I have also set the button to toggle between Hide and Show depending on whether or not the content is visible. My problem is, when I add 'slow' as the duration the button doesnt seem to toggle between hide and show?

    Code:
    <p id="disclaimer">
            Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
          </p>
    Code JavaScript:
    $(document).ready(function() {
    			$('<input type="button" class="toggle" name="toggle" value="Hide" />').insertAfter('#disclaimer');
    			$('.toggle').click(function() {
    				$('#disclaimer').toggle('slow');
     
    				if($('#disclaimer').is(':visible')){
    					$(this).val('Hide');
    				}else{
    					$(this).val('Show');
    				}
    				});
    			$('<strong>START</strong>').prependTo('#disclaimer');
    			$('<strong>END</strong>').appendTo('#disclaimer');
     
     
    			});

    It would be great if someone could explain where Im going wrong with this one, cheers!

    Kyle

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Why are you using jQuery to insert the button into the document?

    2) Why are you checking if the paragraph is visible? Why not check what's the value of the button you just clicked? If it's "Hide", by deduction you know you have to set it now to "Show".

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Furicane,

    Im just following along in the sitepoint novice to ninja book, and they recommend putting the button inside the jquery so that if a user has their javascript disabled then the button wont appear.

    With the second point of yours again Im just following along in the book, these may be primary tips before moving onto proper methods of showing and hiding paragraphs and various other web content.

    Thanks

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    It doesn't work because of the .is(':visible').
    When .is(':visible') is evaluated the div is still animating, so it's still visible, and the button caption doesn't change.

    Try this:

    Code javascript:
    $(document).ready(function() {
    	$('<input type="button" class="toggle" name="toggle" value="Hide" />').insertAfter('#disclaimer');
    	$('.toggle').click(function() {
    		var $this=$(this);
    		$('#disclaimer').toggle('slow', function() {
    			$this.val( $this.val()=='Hide' ? 'Show' : 'Hide' );
    		});
    	});
    	$('<strong>START</strong>').prependTo('#disclaimer');
    	$('<strong>END</strong>').appendTo('#disclaimer');
    });

    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this scallio, very helpful!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •