Javascript Div根据图像调整大小单击

我有两个div在第一个div有一个图像如果我点击图像左div必须重新大小右侧div必须显示完整的页面内容，然后如果我再次点击图像右侧div必须回到原始位置..如何实现这个

 <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>

要在整个页面中显示的内容

由于您没有为image div提供任何id/类，您可以尝试以下操作：

$('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');
   }
});

---

您可以有两个类，然后根据单击按钮在

标记中添加或删除该类。 这些类可以是这样的：

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

试试这个代码

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>

$（文档）.ready（函数（）{
var swidth=$（'#sdiv'）.width（）；
$（'#fdiv a'）。单击（函数（e）{
e、 预防默认值（）；
var dupwidth=swidth；
$（'sdiv'）。动画（{'height'：（$（'sdiv'）.height（）=500）？700:500，'width'：（$（'sdiv'）.width（）=swidth）？parseInt（dupwidth）*1.75:swidth}，200）；
});
});

---

有没有可能把问题重新写成可读的东西？一点语法和标点符号不会出错吧？基本上很难理解你的意思。。。演示link@user3331535用一个演示签出更新的答案。你可以降低高度，但我想要的是。如果用户单击左侧的div图像，则必须缩小到特定的宽度。右边的div必须整页显示，不能将高度缩小到特定的宽度你是说它的高度？先生，我是说它是可展开和可折叠的Div@user3331535你可以看看最新的答案和提琴。