javascript, When right div is hidden left div has to be 100% width

问题:

FIXED

fixed it by editing mplungjan's code to this:

$(function() {     $("#foo").on("click",function() {         if ($(this).is(':checked')) $('#checked-a').show('fast',function() {             $('#checked-b').css("width","60%");             $('#checked-a').css("width","40%");         }) ;         else $('#checked-a').show('fast',function(){            $('#checked-b').css("width","100%").show();                     $('#checked-a').css("width","0%").hide();          });     }); }); 

i would like to have the left div to be 100% (current 60%) when right div (40%) is hidden.

screenshot with checked checkbox:

screenshot with unchecked checkbox:

now i would like to make the left div cover the whole width of the page (100%).

here is my code:

javascript:

      <script type="text/javascript">     $(function(){     ($('input[name = "foo"]').is(':checked'))     $('#checked-a').slideDown('fast');     });   </script> 

div:

    <div class="content2" id="checked-a">     <%= yield %> </div> 

html input:

<input type="checkbox" checked="checked" name="foo" value="1" onclick="$(this).is(':checked') && $('#checked-a').slideDown('fast') || $('#checked-a').slideUp('fast');"/> 

hope someone could help :)

回答1:

Perhaps you mean this? DEMO

$(function() {     $("#foo").on("click",function() {         if ($(this).is(':checked')) $('#checked-a').slideDown('fast',function() {             $('#checked-a').css("width","40%");             $('#checked-b').show();         }) ;         else $('#checked-b').slideUp('fast',function(){            $('#checked-a').css("width","100%");         });     }); }); 

文章来源: javascript, When right div is hidden left div has to be 100% width