Div根据图片调整大小请点击

Question

I had two div in First Div had one image if i click of image left Div have to Re-size Right side Div have to show full page content and then if i click image again right side div have go to original position ..how to achieve this??

 <div style="border: 2px solid red;float:left;width:10%;height:400px "> <a href>Image Click</a></div>
<div style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

Answer 1

As you have not given any id/class to the image div you can try this:

$('div').find('a').on('click', function (e) {
   e.preventDefault();
   var height = $(this).closest('div').css('height');
   if (height === "400px") {
      $(this).closest('div').css('height', 'auto');
   } else {
      $(this).closest('div').css('height', '400px');
   }
});

Updated Demo

Answer 2

You can have two classes then add or remove the class from the <div class="smaller"> tag depending on the click. the classes can be something like this:

.bigger
{
border: 2px solid Blue;
float:left;
width:50%;
height:500px
}
.smaller{
border: 2px solid red;
float:left;
width:10%;
height:400px; 
}

Answer 3

Try This Code

HTML

 <div id="fdiv" style="border: 2px solid red;float:left;width:7%;height:400px "> <a href>Image Click</a></div>
<div id="sdiv" style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

JS

    <script type="text/javascript">
        $(document).ready(function () {
            var swidth=$('#sdiv').width();
$('#fdiv a').click(function (e) {
            e.preventDefault();

     var dupwidth=swidth;
            $('#sdiv').animate({ 'height': ($('#sdiv').height() == 500) ? 700 : 500 ,'width': ($('#sdiv').width() == swidth) ? parseInt(dupwidth)*1.75 : swidth }, 200);

        });

        });

    </script>

DEMO HERE