We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

jQuery expand/collapse

xill2678
xill2678 asked
on
Medium Priority
4,595 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Analyst developer
CERTIFIED EXPERT
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

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! :)
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.