Question

Basicly theres 2 divs open by default, the one of the left is always there and then you have 3 radio buttons. Atleast one must be selected (can’t have “default” column all by itself). By default, the “default” div and “1” is there, and “2” and “3” are invisible (display:none). Each radio button is linked to specific div, so when clicked, jQuery will animate width to merge the selected div into the overall div with the other visible divs. How would this be achievable with jQuery?

Picture <—–i have a link to a picture i made for a better understanding

Answer 1

jsFiddle: http://jsfiddle.net/K8TAS/90/

<input type="checkbox" value="1" checked disabled/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>

<br/><br/>

<div style="height:200px;width:100px;float:left;background:yellow;" class="resizeDiv" id="div0">Default</div>
<div style="height:200px;width:100px;float:left;background:red;" class="resizeDiv" id="div1">1</div>
<div style="height:200px;width:100px;float:left;background:blue;display:none;" class="resizeDiv" id="div2">2</div>
<div style="height:200px;width:100px;float:left;background:green;display:none;" class="resizeDiv" id="div3">3</div>

<script>    
    $("input[type=checkbox]").click( function()
    {
        var amount = 2;

        $("input[type=checkbox]").each( function()
        {
            if ( $(this).val() != "1" )
            {
                if ( $(this).is(":checked") )
                {
                    $( "#div" + $(this).val() ).show();
                    amount++;
                }
                else
                {
                    $( "#div" + $(this).val() ).hide();
                }
            }
        });

        $(".resizeDiv").each( function()
        {
            $(this).width( 200 / amount );    
        });
    });
</script>
​