Sliding tabs

expand clicked tab and contract the other expanded tabs

by arcm111

HTML

<div id="container">
    <div id="vierkant"></div>
    <div id="square1"></div>
    <div id="square2"></div>
</div>

CSS

#container div {
    float: left;
    height: 100px;
}
#vierkant {
    width: 100px;
    background-color: green;
}
#square1 {
    width: 50px;
    background-color: red;
}
#square2 {
    width: 50px;
    background-color: yellow;
}

JavaScript

$('#container').children('div:gt(0)').click(function(){
    $(this).animate({width: $(this).outerWidth() > 50 ? 50 : 300}, 'fast');
    $('#container').children('div:gt(0)').not(this).animate({width: 50}, 'fast');
});