Расширение JQuery и сжатие div при нажатии

Question

Я пытаюсь использовать jQuery для расширения и сжатия высоты деления при нажатии на ссылку, и я не могу на всю жизнь понять, что я делаю неправильно.

Вот 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>

Высота слайдера по умолчанию составляет 300 пикселей в CSS

Вот 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;
    });
}

Я попробовал это, не вызывая API карт Google в div карты-холста, чтобы увидеть, был ли это виновником, но это все равно не будет работать.

Любая помощь приветствуется

Answer 1

Вы забыли закрыть $(document).ready(); функция

ЯШ:

$(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>

работает для меня. проверено в хроме;)