JQuery: Hide/Show

Dev Shed Forums Sponsor:

August 4th, 2008, 01:40 PM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

JQuery: Hide/Show 

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

html Code:

Original - 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>

<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:

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

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

Any help would be greatly appreciated.

August 4th, 2008, 02:51 PM

derelict

garish grotesque gargoyle

Join Date: Mar 2006

Location: gracing gargantuan gothic gateways

Posts: 1,337

Time spent in forums: 2 Weeks 6 Days 8 h 35 m 8 sec
Reputation Power: 1036

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!

August 4th, 2008, 03:17 PM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

Thanks for the response, derelict. slideToggle is indeed the solution I was looking for.

javascript Code:

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

$("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?

August 4th, 2008, 03:35 PM

derelict

garish grotesque gargoyle

Join Date: Mar 2006

Location: gracing gargantuan gothic gateways

Posts: 1,337

Time spent in forums: 2 Weeks 6 Days 8 h 35 m 8 sec
Reputation Power: 1036

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.

August 4th, 2008, 07:38 PM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

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 AND change the link text simultaneously? And then do the opposite when clicked again?

And please forgive my naivety with regard to JS :]

August 5th, 2008, 10:38 AM

jsampsonPC

stick a scissor in you eye

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Jun 2004

Location: Pensacola, Florida

Posts: 1,572

Time spent in forums: 1 Week 6 Days 16 h 19 m 9 sec
Reputation Power: 437

Derek,

The example was right on the page...

javascript Code:

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

$("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 , 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:

Original - javascript Code
$("p").toggle(function(){ $(this).addClass("selected"); $("#myLink").html("I like apples!"); },function(){ $(this).removeClass("selected"); $("#myLink").html("You don't like apples!?"); });

$("p").toggle(function(){
  $(this).addClass("selected");
  $("#myLink").html("I like apples!");
},function(){
  $(this).removeClass("selected");
  $("#myLink").html("You don't like apples!?");
});

__________________
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?

Last edited by jsampsonPC : August 5th, 2008 at 10:47 AM.

August 5th, 2008, 11:51 AM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

Thanks guys! I think I've finally got it.

javascript Code:

Original - 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"); }); });

$(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");
    });
});

August 5th, 2008, 11:59 AM

derelict

garish grotesque gargoyle

Join Date: Mar 2006

Location: gracing gargantuan gothic gateways

Posts: 1,337

Time spent in forums: 2 Weeks 6 Days 8 h 35 m 8 sec
Reputation Power: 1036

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)

August 5th, 2008, 12:09 PM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

Quote:

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!

#10

August 6th, 2008, 09:04 PM

imderek

Contributing User

Join Date: Aug 2008

Posts: 54

Time spent in forums: 18 h 23 m 47 sec
Reputation Power: 5

Ok, here's another question for you. This time I've set it up so that mousing over the link shows the , and once you move your mouse off of the link, the is hidden. See http://www.imderek.com/dev/jquery.php.

javascript Code:

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

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

html Code:

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

<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 stays open if you move your mouse down from the link and into the , and then finally hide it if the mouse moves off of it?

#11

August 6th, 2008, 09:37 PM

derelict

garish grotesque gargoyle

Join Date: Mar 2006

Location: gracing gargantuan gothic gateways

Posts: 1,337

Time spent in forums: 2 Weeks 6 Days 8 h 35 m 8 sec
Reputation Power: 1036

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:

Original - 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

#12

September 13th, 2012, 09:10 AM

mickyjune26

Registered User

Join Date: Jan 2011

Posts: 13

Time spent in forums: 44 m 16 sec
Reputation 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>

#13

September 18th, 2012, 07:18 PM

mickyjune26

Registered User

Join Date: Jan 2011

Posts: 13

Time spent in forums: 44 m 16 sec
Reputation Power: 0

Found the solution - don't include any tags. I just use a lot, and it is more clean in sliding in and out.

#14

September 18th, 2012, 09:16 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 17 h 9 m
Reputation Power: 4192

Please don't misuse elements just because you've got a problem with your previous markup. I suspect the problem is caused by the margins on the . 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. I'm available for hire at Dynamic Site Solutions.

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).

#15

September 19th, 2012, 07:53 AM

mickyjune26

Registered User

Join Date: Jan 2011

Posts: 13

Time spent in forums: 44 m 16 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

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!

JQuery: Hide/Show <P>

Developer Shed Advertisers and Affiliates