Question

I have 2 divs that positioned horizontally (float:left; width:50%;). But i want give them height:500px with overflow:hidden and display expand/coolapse button on bottom. How to create it with jquery ?

   <div id="tab-two">

        <ul class="nav">
            <li class="nav-one"><a href="#featured" class="current">last</a></li>
            <li class="nav-two"><a href="#core">popular</a></li>
        </ul>

        <div class="list-wrap">

            <ul id="tabclick">

                <li>
            ***content***                       
                            </li>
             </ul>

         </div> 

     </div>
 <style>
 #tab-two {
 background: none repeat scroll 0% 0% #FFFFFF;
 border-radius: 4px 4px 4px 4px;
 border-right: 1px solid #CCCCCC;
 margin: 0pt 1% 5px 0pt;
 padding: 1px 0pt 0pt 5px;
 }
 </style>

Answer 1

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>