jQuery expand/collapse

i have a code snippet i picked up from somewhere (i can't remember where now) but i'd like to add a simple fading effect to it. this snippet uses jQuery's slideToggle function to simply expand & contract a div. I'd like to also add jQuery's fading function to this, but i havent been able to figure out how (i'm new to this stuff). I'd like the div to fade in when expanding, and fade out when contracting. can anyone give me any pointers on this? thanks
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#trigger").click(function(event) {event.preventDefault();$("#hidden").slideToggle();});
});
</script>
 
 
<a href="# id="trigger">expand/contract div below</a>
 
<div id="hidden" style="display:none;">
     content to fade here
</div>

Open in new window

LVL 1
xill2678Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
Using toggle will re(set) opacity to the element.
It also (re)sets the width and height of the element.

So you could use toggle optionally with a certain speed ("fast", "slow" or "normal" or with a defined number of milliseconds.

However, if you don't want the width being (re)set, you can use animate.

You could see the difference in bahaviours with an element with 'lots' of content.
<!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>
	<title></title>
	<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js'></script>
	<script type='text/javascript'>
		$(function() {
			$("#trigger").click(function(event) {
				event.preventDefault(); $("#hidden").toggle("slow");
			});
			$("#trigger2").click(function(event) {
				event.preventDefault(); $("#hidden").animate({ "height": "toggle", "opacity": "toggle" });
			});
		});
	</script>
</head>
<body>
<a href="#" id="trigger">expand/contract using toggle</a>
<a href="#" id="trigger2">expand/contract using animate</a>
 
<div id="hidden" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis nunc, placerat ac, bibendum non, pellentesque nec, odio. Nulla fringilla aliquet nibh. Donec placerat, massa id commodo ornare, justo lectus faucibus leo, in aliquam nisl quam varius velit. Maecenas ullamcorper. Aliquam lectus metus, scelerisque ac, scelerisque vitae, sodales eu, metus. Sed varius nisi sit amet turpis. Mauris a arcu iaculis risus sodales dignissim. Aliquam ac risus. Donec turpis. Sed sit amet mi. Nam sem nunc, suscipit quis, cursus non, facilisis nec, diam. Donec nec mi semper urna interdum ultrices. Sed tellus. Sed sodales, quam sit amet dignissim ornare, orci velit blandit augue, ut pretium diam pede eget felis. Maecenas turpis justo, dapibus non, scelerisque et, consequat id, est. Mauris ornare. Donec posuere ligula et nulla. Quisque sollicitudin libero vitae dolor.
 
Curabitur elementum venenatis lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam velit. Quisque eros nisi, congue id, aliquam ac, interdum in, velit. Duis cursus tellus molestie libero. Cras scelerisque pellentesque nisl. Phasellus adipiscing pretium mi. Curabitur faucibus nisl sit amet ante. Pellentesque lacinia erat a nisi molestie lacinia. In erat metus, tincidunt id, consequat nec, blandit bibendum, quam. Nunc a tortor.
 
Curabitur tempor hendrerit est. Pellentesque pulvinar pharetra purus. Pellentesque id metus nec enim rhoncus lacinia. Quisque massa lectus, adipiscing vitae, tristique sit amet, adipiscing a, mauris. Proin tortor nunc, volutpat non, facilisis et, suscipit a, tortor. Etiam tempus. In hac habitasse platea dictumst. Aenean eget sapien. Vestibulum ut est a erat pretium tincidunt. Fusce ac purus nec elit bibendum condimentum. Phasellus commodo commodo justo. Proin purus sem, volutpat a, facilisis vitae, malesuada vitae, eros. Aliquam porttitor, felis at molestie tempus, lacus orci vestibulum dolor, vel tincidunt purus dui in metus. Aliquam nunc sem, rutrum nec, adipiscing gravida, ultricies id, erat. Suspendisse potenti. Curabitur fringilla. Morbi sit amet est et tellus tristique molestie. Duis luctus. Ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
xill2678Author Commented:
im still learning jquery and everything it has built in, but the animate function you provided is exactly what i was looking for! funnily enough other plugins i ran across took 50+ lines of code even with jquery as a base. this is sweet and simple and does just what i need it to without all the fluff or useless options. thank you so much! :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.