Jquery Expand / Collapse Div Based on Height

I'm using the following jquery code to expand a div. I'm new to jquery, and have been trying to collapse the div after it is open. Ultimately I would like to change the expand / collapse text on the button (from expand to collapse depending on the state of the div)  I'm sure this is simple for a jquery expert.

Thanks!
<!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>Test</title>
    <style type="text/css">
		.calendar{width:300px;height:240px;background:#ebebeb;border:1px solid #ccc;}
		#trigger{padding:5px;background:#ccc;color:#000;cursor:pointer;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#trigger").click(function () {
                $('.calendar').animate({height:'480px'},1500)
            });
        });
    </script>
</head>
<body>
    <div class="calendar">
    </div>
    <a id="trigger">Expand / Collapse</a>
</body>
</html>

Open in new window

LVL 16
s8webAsked:
Who is Participating?
 
hieloCommented:

<!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>Test</title>
    <style type="text/css">
                .calendar{width:300px;height:240px;background:#ebebeb;border:1px solid #ccc;}
                #trigger{padding:5px;background:#ccc;color:#000;cursor:pointer;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#trigger").click(function () {
		  	var self=this;
		  	if(this.innerHTML=='Expand')
               {
				$('.calendar').animate({height:'240px'},1500,function(){
					self.innerHTML='Collapse';
				});
				
			}
			else
			{
				$('.calendar').animate({height:'0px'},1500,function(){
					self.innerHTML='Expand';			
				});
			} 
            });
        });
    </script>
</head>
<body>
    <div class="calendar">
    </div>
    <a id="trigger">Collapse</a>
</body>
</html>

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
Check this out : http://jsbin.com/eyeju

Using the toggleClass from jquery UI : http://jqueryui.com/demos/toggleClass/
Defined two class : calender and expanded both are the same except the height.

Checking the calender for the specific class to set the text of the toggle link.
0
 
s8webAuthor Commented:
That's great Hielo. Thanks! I tweaked it a little to further suit my needs. 240px initial display with an expand button to take it to 480px. I will post the snippet after this. Thanks again!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
s8webAuthor Commented:
Hielo's solution works great, here is the final result which shows 240px initially, then expands to 480px on click with an option to return to 240px with an additional click.
<!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>Test</title>
    <style type="text/css">
                .calendar{width:300px;height:240px;background:#ebebeb;border:1px solid #ccc;}
                #trigger{padding:5px;background:#ccc;color:#000;cursor:pointer;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
                                
        $(function(){
			$("#trigger").click(function () {
                        var self=this;
                        if(this.innerHTML=='Expand')
               {
                                $('.calendar').animate({height:'480px'},1500,function(){
                                        self.innerHTML='Collapse';
                                });
                                
                        }
                        else
                        {
                                $('.calendar').animate({height:'240px'},1500,function(){
                                        self.innerHTML='Expand';                        
                                });
                        } 
            });
        });
    </script>
</head>
<body>
    <div class="calendar">
    </div>
    <a id="trigger">Expand</a>
</body>
</html>

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
Allthough the UI library is quite large (you can allways customize it by just getting what you need), but if you allready use it, the solution using the toggleClass method is my fav; you have all the GUI logic in your style sheets...
0
 
s8webAuthor Commented:
Thanks AlbertVanHalen, and I would agree however, there is a db query involved that I would rather not break up. The toggle method does just that, turns things on and off. With this solution I am able to manipulate the height of the div instead.
0
 
Albert Van HalenAnalyst developerCommented:
It's toggleClass instead of toggle.
Nothing is turned off or on (only if specified in the css rule)
As you can see, the height is set in the .expanded class rule.

NB This is not argueing about your selected solution, it's my argument of using toggleClass which imo is better: applying/removing a class with animation instead of animating new css properties in your code.

It's separating code and ui
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.