asked on

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

Albert Van Halen

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.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

s8web

ASKER

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!

s8web

ASKER

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

Albert Van Halen

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...

s8web

ASKER

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.

Albert Van Halen

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