CSS - Transitions - Applied to tab panel

by Ben Clayton

HTML

<button class="but" data-tab=1>Tab 1</button>
<button class="but" data-tab=2>Tab 2</button>
<button class="but" data-tab=3>Tab 3</button>
<div class="box dbg-off">
    <div class="tab-wrapper">
        <div class="tab-panel-1">111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed euismod velit, sit amet tincidunt elit. Nunc tempor purus lacus, sit amet condimentum neque suscipit id. Aenean efficitur massa pharetra justo luctus, vel eleifend neque molestie. Nullam sed dapibus tortor. Vivamus sit amet rutrum lectus. Donec accumsan pellentesque tincidunt. Mauris porttitor justo eget libero dapibus pretium. Nunc augue felis, convallis vel tortor id, molestie iaculis urna. Donec bibendum nisl vitae ullamcorper auctor. Mauris elit nulla, accumsan ac tortor eu, lacinia rutrum dui. Cras volutpat sed ligula vitae bibendum. Nam nunc risus, tristique eget lacinia sed, malesuada ut ligula. Vestibulum laoreet nibh et elit cursus laoreet. Cras consectetur metus dolor, et malesuada mauris tempor in.</div>
    </div>
    <div class="tab-wrapper">
        <div class="tab-panel-2">222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed euismod velit, sit amet tincidunt elit. Nunc tempor purus lacus, sit amet condimentum neque suscipit id. Aenean efficitur massa pharetra justo luctus, vel eleifend neque molestie. Nullam sed dapibus tortor. Vivamus sit amet rutrum lectus.</div>
    </div>
    <div class="tab-wrapper">
        <div class="tab-panel-3">333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed euismod velit, sit amet tincidunt elit. Nunc tempor purus lacus, sit amet condimentum neque suscipit id. Aenean efficitur massa pharetra justo luctus, vel eleifend neque molestie. Nullam sed dapibus tortor. Vivamus sit amet rutrum lectus.</div>
    </div>
</div>

CSS

.box {
    border:1px solid #C0C0C0;
    position:absolute;
    top:50px;
    width:50%;
    font-size:12px;
    overflow:hidden;
    /* Set our transitions up. */
    -webkit-transition: max-height 0.4s ease;
    -moz-transition: max-height 0.4s ease;
    transition: max-height 0.4s ease;
}

.but {
    cursor:pointer;
}
.tab-wrapper {
    height:10000px;
    overflow:hidden;
    padding:0px
}
.dbg .tab-wrapper {
    border:green 1px solid;
    margin-bottom:10px;
}
.tab-wrapper > div {
    padding:10px;
}
.dbg .tab-panel-1, .dbg .tab-panel-2 {
    border:blue 1px solid;
    padding:10px;
}

JavaScript

//$('.tab-panel-1').show();
//$('.tab-panel-2').hide();

var $current = $('.tab-panel-1');
swop($('.tab-panel-1'), 1);

$('.but').on('click', function () {
    swop($('.tab-panel-' + $(this).data('tab')));
});

function swop($open, ft) {
    $('.box').css("max-height", $current.outerHeight(true));
    var t = ft || 400;
    $current.removeClass('selected');
    $current.fadeOut(t, function () {
        console.log("faded out");
        $current.parent().hide();
        $open.parent().show();
        $open.show();
        $('.box').css("max-height", $open.outerHeight(true));
        console.log("measure height:", $open.outerHeight(true));

        if (t > 1) $open.hide();
        console.log("fadein", t);
        $open.fadeIn(t, function () {
            $(this).addClass('selected');
            $current=$(this);
        });

    });
}