横向 Collapse/Extend 图片？

Question

我在一个容器中有 2 张图像，它们都占据了观众屏幕的 50%。我想要一个可折叠的 div，当单击左图像时，它从左图像 over/on 水平延伸到右图像的顶部，这可能吗？

这里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的切换功能来实现这个。

横向 Collapse/Extend 图片？

Horizontally Collapse/Extend Images?

html

css

image

extend

collapse