水平折叠/扩展图像？

Question

我在一个容器中有 2 张图片，它们都占据了 50% 的观看者屏幕。我想要一个可折叠的 div，当点击左图时，它从左图水平延伸到右图上方/上方，这可能吗？

这里is a graphic of what I mean

单击图像 A 时，我希望 div (B) 在图像 C 上水平延伸，然后再次折叠回图像 A 下方

Graphic of A&B

根据我的研究，我还没有完全找到我需要的东西，如果有任何帮助，我将不胜感激。到目前为止，我试图以正常垂直的方式折叠图像，但我什至无法让它发挥作用。这是我的进步的 Jsfiddle：http://jsfiddle.net/Dunne08/tfwyxksL/6/

    <div class="container">
    <div class="imageleftcontainer">
        <img alt="270x170" class="leftimage" src="https://raw.githubusercontent.com/Dunne08/split/master/images/A.jpg"  /> 
          </div>

          <div class="imagerightcontainer">
        <img alt="C" class="rightimage" src="https://raw.githubusercontent.com/Dunne08/split/master/images/C.jpg"  />
    </div>

</div>

CSS：

body {
  margin: 0px;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: 0px;
}

.imageleftcontainer {
    float: left;
    width:50%;
    max-height:100vh;
    margin: 0px;
    padding: 0px;
    background-color: #000000;

}

.leftimage {
    width: 100%;
}

.imagerightcontainer {
    float: left;
    width:50%;  

    max-height:100vh;
    margin: 0px;
    padding: 0px;

}

.rightimage {
    width: 100%;
}

.container .content {
    display: none;
    padding : 5px;
}

脚本：

$(".imageleftcontainer").click(function () {

    $imageleftcontainer = $(this);
    //getting the next element
    $leftimage = $imageleftcontainer.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $leftimage.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $imageleftcontainer.text(function () {
            //change text based on condition
            return $leftimage.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Answer 1

这是一个演示：https://jsfiddle.net/3fqsoh4a/25/

$(".leftA").click(function(){
    $(".leftB").toggleClass("test");
});

我是用jquery的toggle功能来实现的。