Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7

    JQuery: Hide/Show <P>


    I have a page which contains a simple link and a paragraph below it:

    html Code:
    <a href="#" class="button">Display page content</a> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor, enim quis convallis lobortis, sem enim auctor eros, sit amet ornare dui nunc sit amet nisl.</p>


    I'd like jQuery to slide the paragraph down when the link is clicked (along with change the link text to "Hide page content"), and then slide the paragraph up when the link is clicked again (and change the link text back to "Display page content"). I've got the first part, but don't quite know how to proceed:

    javascript Code:
    $(document).ready(function(){
        $("p").hide();
        $("a.button").click(function() {
            $(this).html('Hide page content');
            $("p").slideDown('normal');
        });
    });


    Any help would be greatly appreciated.
  2. #2
  3. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    use one of jQuery's most basic pieces:

    .toggle()

    If you plan on using jQuery heavily, I strongly recommend that you read all available documentation and run through all available tutorials. I used jQuery for about a week and learned about .toggle() in the first hour. This question would have been answered almost immediately just by reading through the basic tutorial on the jQuery site.

    good luck!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7
    Thanks for the response, derelict. slideToggle is indeed the solution I was looking for.

    javascript Code:
    $("a.button").click(function() {
        $("p").slideToggle('normal');
    });

    The only thing left is how do I get the link text to change depending on whether or not the paragraph is displayed?
  6. #4
  7. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    please read my response above, and follow the link provided, to gain insight on how to use .toggle() to enforce a series of actions to be toggled every other click. toggle allows you to assign two different functions to be run, alternating on each click. use those functions to accomplish whatever you want your script to do.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7
    I had a look at the link previously, and couldn't figure out how to use its methodology to create the desired effect.

    Could you (or anyone) write an example of how .toggle() can show a <p> AND change the link text simultaneously? And then do the opposite when clicked again?

    And please forgive my naivety with regard to JS :]
  10. #6
  11. stick a scissor in you eye
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2004
    Location
    Pensacola, Florida
    Posts
    1,572
    Rep Power
    439
    Derek,

    The example was right on the page...

    javascript Code:
    $("p").toggle(function(){
      $(this).addClass("selected");
    },function(){
      $(this).removeClass("selected");
    });


    Do you see the two functions, seperated by a comma? Put your "on" events within the first function, and the "off" events within the second function. The first will change text for a <p>, and the second will return the value of the text to its original state.

    If this doesn't make sense to you, I suggest you go back and read the jQuery getting-started documentation to get more familiar with the syntax and structure of jQuery.

    You could modify the provided code to change text in a link too:

    javascript Code:
    $("p").toggle(function(){
      $(this).addClass("selected");
      $("#myLink").html("I like apples!");
    },function(){
      $(this).removeClass("selected");
      $("#myLink").html("You don't like apples!?");
    });
    Last edited by jsampsonPC; August 5th, 2008 at 10:47 AM.
    FREE Web Development Videos | PHP Reference | MySQL Reference | jQuery Documentation

    Markup Validation | CSS Validation | Web Developers, get FireBug & IE Developer Toolbar

    When seeking help:
    Submit clear questions and code. Use syntax highlighting.
    Be patient, and respectful. Don't abuse your access to
    professional guidance - nobody here is obligated to answer
    your questions, be thankful that they do.

    Are you a good person?
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7
    Thanks guys! I think I've finally got it.

    javascript Code:
    $(document).ready(function(){
    	$('p').hide();
    	$('a').toggle(function(){
    		$('p').show('slow');
    		$("#myLink").html("Hide page content");
    	},function(){
    		$('p').hide('slow');
    		$("#myLink").html("Display page content");
    	});
    });
  14. #8
  15. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    I think what you're missing here is that the .toggle() function replaces the .click() function...

    think of .toggle() as the exact same thing as a .click() function, except it takes two functions and runs each alternately, every other click.

    you would assign the .toggle() to the link to be clicked, and have the functions affect that link's text and whatever paragraph is to be affected.

    good luck!

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7
    Originally Posted by derelict
    I think what you're missing here is that the .toggle() function replaces the .click() function..
    Yep, that was the problem alright. Thanks again for the help!
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    54
    Rep Power
    7
    Ok, here's another question for you. This time I've set it up so that mousing over the link shows the <p>, and once you move your mouse off of the link, the <p> is hidden. See http://www.imderek.com/dev/jquery.php.

    javascript Code:
    $(document).ready(function(){
    	$('p').hide();
    	$('a#toggleLink').mouseover(function(){
    		$('p').show('fast');
    	});
    	$('a#toggleLink').mouseout(function(){
    		$('p').hide('fast');
    	});
    });

    html Code:
    <a href="#" id="toggleLink">Toggle content</a>
    <p>Maecenas facilisis dictum ante. Duis ac nisl...</p>

    The question is: how can I make it so that the <p> stays open if you move your mouse down from the link and into the <p>, and then finally hide it if the mouse moves off of it?
  20. #11
  21. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    that's a bit trickier... the way I've done this is with a global timeout before the p gets hidden.

    here's the basic idea:

    1) when the mouseover goes on the link, you check to see if a global timeout exists, and if so, kill it (so the p stays open). Then you make sure the p is shown, just as normal.

    2) when you mouseout of the link, you don't hide the p immediately, instead you set a timeout, storing it in a global variable, to do the hiding.

    3) you put these same functions on the p itself, so that mousing over it kills the timeout to hide it, and mousing out of it reinstates it.

    you can set the timeout to be whatever duration suits you, usually about a half second to a second works well enough.

    so now, on to the code:

    Javascript Code:
    $(document).ready(function(){
    	$('p').hide();
    	// note we add 'p' into the selection range
    	$('a#toggleLink,p').mouseover(function(){
    		// and we check for out timeout, clearing if needed.
    		if(window.willhide) clearTimeout(window.willhide);
    		$('p').show('fast');
    	});
    	// again, selecting 'p' too
    	$('a#toggleLink,p').mouseout(function(){
    		// and setting that timeout to do the work for us
    		window.willhide = setTimeout(function() {
    			$('p').hide('fast');
    		},750); // with a 750 ms delay
    	});
    });


    notice I used window.willhide as the timeout variable -- this is so it is stored globally (on the window object) so that it will be accessible by both functions. that should do what you want it to do; give it a shot and see. also look at the jquery documentation because there may be a more elegant way to do this with jquery. good luck!
    Last edited by derelict; August 6th, 2008 at 09:38 PM. Reason: +p

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    13
    Rep Power
    0
    I followed the directions above, and it toggles. However, it does a weird bouncy thing when toggling. Is there a way to ensure smooth out the toggle?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="assets/jquery-1.8.1.js"></script>
    <script>
    	$(document).ready(function(){
    		$("#hidden-text").hide();
    		$('a[id="toggle"]').toggle(function(){
    			  $("#hidden-text").show('slow');
    			  $('a[id="toggle"]').html("Hide Details");
    			},function(){
    			  $("#hidden-text").hide('slow');
    			  $('a[id="toggle"]').html("Show details");
    	  });
    	});
    
    </script>
    
    
    </head>
    
    <body>
    <p>Good 'ol paragraph.  <a href="#" id="toggle">Show Details</a><br />
    
    ---------------------------------
    <span style="display:none" class="hidden-text-class" id="hidden-text"><p>This is a paragraph with little content.</p></span> 
    <p>-----------------------------The hidden text should display between the lines above.  
    <br />This script is from http://forums.devshed.com/javascript-development-115/jquery-hide-show-p-548384.html</p>
    
    
    </body>
    </html>
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    13
    Rep Power
    0
    Found the solution - don't include any <p> tags. I just use <BR> a lot, and it is more clean in sliding in and out.
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Please don't misuse <br> elements just because you've got a problem with your previous markup. I suspect the problem is caused by the margins on the <p>. Simply add a rule to your stylesheet to give "margin:0" to those paragraphs. If you still want some space to appear between the paragraphs, you could then give them some top and/or bottom padding.

    P.S. Next time please start your own thread instead of reviving a very old one.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    13
    Rep Power
    0
    Originally Posted by Kravvitz
    Please don't misuse <br> elements just because you've got a problem with your previous markup. I suspect the problem is caused by the margins on the <p>. Simply add a rule to your stylesheet to give "margin:0" to those paragraphs. If you still want some space to appear between the paragraphs, you could then give them some top and/or bottom padding.

    P.S. Next time please start your own thread instead of reviving a very old one.
    Thanks for the tip! All these CSS rules are tricky, but I'm starting to notice patterns of those that are referenced over and over! I may be getting closer to migrating away from tables and starting to use more DIVs!
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo