jQuery expand/collapse

Posted on 2009-02-17
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

    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" "">
    <html xmlns="" >
    	<script type='text/javascript' src=''></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

    LVL 1

    Author Closing Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Suggested Solutions

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

    760 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

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now