JQuery expand and contract div on click

Question

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="map">
    <div id="map-canvas">this is a test</div>
</div>

<div id="slider-map"><a href="#" id="expand">Expand +</a></div>

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;
    });
}

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

Any help would be much appreciated

Does #slider have overflow: hidden applied to it in your CSS? Also you dont need to declare the new height as maxWidth+"px", just maxWidth is fine. — svenbravo7, Nov 02 '12 at 10:35
You forgot to close the $(document).ready properly. replace } with }); — user1534664, Nov 02 '12 at 10:41
Did'nt realise I could omit the "px" thanks for that, although it still won't work. The only styles applied to #slider are margins, and #slider.map height:300px; width:100%; — bananabread_, Nov 02 '12 at 10:42
Wow do I feel stupid, that missing bracket was the culprit. Thanks! — bananabread_, Nov 02 '12 at 10:43

score 0 · Answer 1 · answered Nov 02 '12 at 10:43

You forgot to close the $(document).ready(); function

js:

$(document).ready(function(){

    var maxWidth = 500;
    var minWidth = 300;

    $("#expand").click(

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

css:

.map
{
    background-color:green;
}

<div id="slider" class="map">
    <div id="map-canvas">this is a test</div>
</div>

html:

<div id="slider-map"><a href="#" id="expand">Expand +</a></div>

works for me. tested in chrome ;)

JQuery expand and contract div on click

1 Answers1