[Solved] expand collapse div with height [closed]

by


I don’t see where you have 2 divs in your code that will function as described. I worked this up for you. You should be able to edit it to fit your HTML/CSS tags:

<style type="text/css">

.floatBox {
    position: relative;
    float: left;
    width: 50%;
    height: 500px;
    overflow: hidden;
    display: block;
}

.boxContent {
    display: table;
}

a.expandLink {
    width: 100%;
    height: 30px;
    background: #059;
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    display: block;
}

</style>


<script>

var collapseH = 500; // set the height of your collapse state

$(document).ready(function() {
    $('.expandLink').click(function() {
        var $link   = $(this);
        var $box    = $link.parents('.floatBox'); // get parent with class="floatBox"
        var innerH  = $box.children('.boxContent').innerHeight(); // get height of inner HTML
        var linkH   = $link.height(); // get height of link to add to your animation

        if ($box.height() == collapseH) { // if the box is collapsed

            // animate to full inner height
            $box.stop().animate({
                height: innerH+linkH
            }, 500);

            // change text of link
            $link.html('collapse');

        } else { // if it is expanded

            // animate to collapsed height
            $box.stop().animate({
                height: collapseH
            }, 500);

            // change text of link
            $link.html('expand');

        }

        return false;
    });
});

</script>


<div id="container" style="width: 800px;">
    <div class="floatBox">
        <div class="boxContent">
            <!-- PUT YOUR CONTENT HERE -->
        </div>
        <a href="#" class="expandLink">expand</a>
    </div>
    <div class="floatBox">
        <div class="boxContent">
            <!-- PUT YOUR CONTENT HERE -->
        </div>
        <a href="#" class="expandLink">expand</a>
    </div>
</div>

solved expand collapse div with height [closed]