Expand/collapse 框像 Google 图片

Question

我知道了：

   <div class="col-lg-3">
        <div class="visibleContent">
        </div>
        <div class="expandibleContent">
        </div>
   </div>
   <div class="col-lg-3">
        <div class="visibleContent">
        </div>
        <div class="expandibleContent">
        </div>
   </div>
   <div class="col-lg-3">
        <div class="visibleContent">
        </div>
        <div class="expandibleContent">
        </div>
   </div>
   <div class="col-lg-3">
        <div class="visibleContent">
        </div>
        <div class="expandibleContent">
        </div>
   </div>

我希望 .visibleContent 可以单击以展开 .exandibleContent 像带有三角形指针的 Google 图像。

正确示例：LINK

我试图深入理解该代码，但我做不到。你能写一个功能相同但只有四个图像的代码吗？

我只需要 4 张具有相同 slidetoggle 功能的图片的网格。

Answer 1

看看这个

https://codepen.io/anon/pen/owbebY 变化

$('.image-grid').empty().html(cells(50));

到

$('.image-grid').empty().html(cells(4));

你需要这样吗

Expand/collapse 框像 Google 图片

Expand/collapse box like Google Images

html

javascript

css

jquery

slidetoggle