Toggle height of div using jQuery

I am trying to toggle the height of div that can vary in height. I want to toggle it to 10% of it's original height when the user clicks the button and 100% when clicked back open. I also need to change the class of an arrow to reflect the current toggle state. I haven't been able to nail down the second part. Any whelp would be greatly appreciated.

Here is what I got so far...

function togglePracticeDrills() {
    $("#drillHelpSlide").animate({height:"10%"});
    $(".arrow").addClass("minimized");
};
开发者_如何学Go

Thanks!

function togglePracticeDrills() {
  var origHeight = $('#drillHelpSlide').data('origHeight');

    if (origHeight) {
        $('#drillHelpSlide').removeData('origHeight');
        $('#drillHelpSlide').animate({height: origHeight});
    } else {
        origHeight = $('#drillHelpSlide').height();
        $('#drillHelpSlide').data('origHeight', origHeight);
        $('#drillHelpSlide').animate({height: origHeight * 0.1});
    }

    $(".arrow").addClass("minimized");
};

http://jsfiddle.net/RsceU/

You may try this. Here div height is 300px.

function toggleDiv(){
var dv5 = document.getElementById('<%= Div5.ClientId %>');

if($(dv5).height()=="300")

        {
            $(dv5).css("height","30px");
        }
        else
        {
            $(dv5).css("height","300px");
        }
}

function togglePracticeDrills() {
    var $slide = $('#drillHelpSlide');
    // I'm assuming .arrow is withing #drillHelpSlide, as you probably need to limit the selector somehow.
    var $arrow = $('.arrow', $slide);

    var slideHeight = $slide.height();

    if (!$arrow.hasClass('minimized')) {
        $slide.data('originalHeight', slideHeight);
        $slide.animate({height:slideHeight/10});
        $('.arrow').addClass("minimized");
    } else {
        var originalHeight = $slide.data('originalHeight');
        $slide.animate({height:originalHeight});
        $('.arrow').removeClass("minimized");
    }
};

You could do something like this:

var height = $('#drillHelpSlide').height() / orig_height;
var new_height = (height % 100) * 10;
$("#drillHelpSlide").animate({height: new_height + "%"});

This works because 100 % 100 = 1; multuply by 10 gives you 10. 10 % 100 = 10; multiply by 10 gives you 100.

You could try something like this:

var slideHeight = $("#drillHelpSlide").height();
$("#drillHelpSlide").animate({ height: (slideHeight / 10) });

Here's a working example:

<script type="text/javascript">
    $(function() {
        $("#collapse").click(function() {
            var elHeight = $("#test").height();
            $("#test").animate({ height: (elHeight / 10) });
        });
        $("#expand").click(function() {
            $("#test").animate({ height: "300px" });
        });
    });
</script>
<div id="test" style="height:300px;border:1px solid #ccc;">
    Hello world!
</div>
<input type="button" id="collapse" value="Collapse" />
<input type="button" id="expand" value="Expand" />

Try something like this:

function togglePracticeDrills() {
    constant originalHeight = ORIGINAL_HEIGHT_HERE;
    var tenPercentHeight = 0.1 * originalHeight;

    if ($(".arrow").hasClass("minimized")) {
        $("#drillHelpSlide").animate({height: originalHeight});
        $(".arrow").removeClass("minimized");
    } else {
        $("#drillHelpSlide").animate({height: tenPercentHeight});
        $(".arrow").addClass("minimized");
    }
}