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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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:
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
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

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
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.