CODEWITHSUNDEEP
jquerycss
Bingles
Bingles

Reputation: 93

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

Thanks!

Upvotes: 1

Views: 6735

Answers (6)

Tanvir Ahmed
Tanvir Ahmed

Reputation: 21

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

Upvotes: 2

Kostas Maragos
Kostas Maragos

Reputation: 569

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

Upvotes: 0

James Johnson
James Johnson

Reputation: 46047

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" />

Upvotes: 0

Elliot Nelson
Elliot Nelson

Reputation: 11557

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/

Upvotes: 3

Glen Solsberry
Glen Solsberry

Reputation: 12320

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.

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239250

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

Upvotes: 0

Related Questions