jQuery expand/collapse

Posted on 2009-02-17
Medium Priority
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">
$("#trigger").click(function(event) {event.preventDefault();$("#hidden").slideToggle();});
<a href="# id="trigger">expand/contract div below</a>
<div id="hidden" style="display:none;">
     content to fade here

Open in new window

Question by:xill2678
LVL 19

Accepted Solution

Albert Van Halen earned 2000 total points
ID: 23659748
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" >
	<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" });
<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;

Open in new window


Author Closing Comment

ID: 31547731
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! :)

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month17 days, 2 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question