Filtered Width Example

by bizamajig

HTML

<div class="a" data-expanded="1">A <button onclick="adjustSize('a')"></button></div>
<div class="b">B</div>
<div class="c" data-expanded="1">C <button onclick="adjustSize('c')"></button></div>
    
<br style="clear:both;">
<span>I am now: 100</span>

CSS

div {
    float: left;
    border: 1px solid red;
    height: 50px;
}
.a, .c {
    width: 50px;
}
.b {
    width: 100px;
}

JavaScript

function adjustSize(side) {
    
    // Vars
    var fullWidth = 200;
    var sideWidth = 50;
    var obj = $('.'+side);
    
    // Get the jQuery object of the side and handle collapsing here
    if (obj.attr('data-expanded') == "1") {
        obj.css({'float':'none','clear':'both'});
        obj.attr('data-expanded',0);
    } else {
        obj.css({'float':'left','clear':'none'});
        obj.attr('data-expanded',1);
    }
    
    // Create a filteredWidth
    var filteredWidth = fullWidth;
    $('div[data-expanded=1]').each(function() { filteredWidth = filteredWidth - sideWidth; });
    
    // Apply filteredWidth
    $('.b').width(filteredWidth);
    $('span').text('I am now: '+filteredWidth);
    
}