Expand/Contract div jQuery not working, can someone help?

I'm trying to use jQuery to expand and contract the height of a div when a link is clicked, and I can't for the life of me work out what I'm doing wrong.

Here's the html;

<div id="slider" class="alternate">
	<div id="map_canvas" height="100%" width="100%"></div>
</div>
<a href="#" id="expand">Expand +</a>

HTML:

The slider height is 300px by default in the CSS

Here's the jQuery;

$(document).ready(function() {

	var maxWidth = 500;
	var minWidth = 300;

	$("#expand").click(
		function(){
			var curHeight = $("#slider").height();
			if(curHeight==300)
			{
				$("#slider").animate({height: maxWidth+"px"}, { queue:false, duration:400 });
				$("#expand").html("Contract <small style='font-size:12px;'>-</small>");
			}
			else
			{
				$("#slider").animate({height: minWidth+"px"}, { queue:false, duration:400 });
				$("#expand").html("Expand <small style='font-size:12px;'>+</small>");
			}
		return false;
	});
}

Code (markup):

I've tried this without the Google maps API in the div too see if that was the culprit, but it still won't work.

Any help would be much appreciated

 

You're wiping out the anchor in #expand on the first click. Its .html has to be the full anchor:

[COLOR=#009900]<[URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL] [COLOR=#000066]href[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"#"[/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"expand"[/COLOR]>[/COLOR]Expand +[COLOR=#009900]<[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL]>[/COLOR]
or
[COLOR=#009900]<[URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL] [COLOR=#000066]href[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"#"[/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"expand"[/COLOR]>[/COLOR]Contract -[COLOR=#009900]<[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL]>[/COLOR]

Code (markup):

 

Hmm, not sure what you mean by that.

Ive changed it to this;

$("#expand").html("Contract <a href="#" id="expand">Expand +</a>");

Code (markup):

$("#expand").html("Expand <a href="#" id="expand">Contract -</a>");

Code (markup):

Still no joy

 

Without playing with it in the browser you're using, I can't be sure, but

$(document).ready(function() {
      var maxWidth = 500;
     var minWidth = 300;
[B][COLOR=#ff0000]}[/COLOR][/B]

      $("#expand").click(
         function(){
             var curHeight = $("#slider").height();
             if([B][COLOR=#ff0000]curHeight<400[/COLOR][/B])
             {
                 $("#slider").animate({height: maxWidth+"px"}, { queue:false, duration:400 });
                 $("#expand").html([B][COLOR=#ff0000]"<a href="#" id="expand">Contract -</a>"[/COLOR][/B]);
             }
             else
             {
                 $("#slider").animate({height: minWidth+"px"}, { queue:false, duration:400 });
                 $("#expand").html([B][COLOR=#ff0000]"<a href="#" id="expand">Expand +</a>"[/COLOR][/B]);
             }
         return false;
     }); 

Code (markup):

try that.