展开折叠html,同时展开/折叠HTML div

我正在尝试创建一行HTML div，当您单击它们时会展开和折叠。请看这个jsFiddle来了解我的意思：http://jsfiddle.net/Lm6Pg/3/。 (您可能必须展开结果窗格或使用全屏结果才能使所有div显示在一行中。)

目前，我正在使用One% CSS Grid让所有div出现在一行上，然后切换不同的CSS列类，根据当前状态和点击的div来展开和折叠div。

About

Lorem ipsum dolor sit amet.

Other

Lorem ipsum dolor sit amet.

Stuff

Lorem ipsum dolor sit amet.

这是我的javascript(我已经从jsFiddle中的内容改变了它，因为我正在乱搞动态确定需要切换的列类)：

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

var tile = $(this);

var otherTiles = tile.siblings();

var currentSelectedTile = otherTiles.filter(".selected");

var unselectedOtherTiles = otherTiles.not(".selected");

var otherTileWeight, tileWeight;

if (currentSelectedTile.length) {

otherTileWeight = 3;

tileWeight = 3;

} else {

otherTileWeight = 4;

tileWeight = 4;

}

tile.toggleClass("selected col" + tileWeight + " col6", 600);

currentSelectedTile.toggleClass("selected col3 col4", 600);

unselectedOtherTiles.toggleClass("col" + otherTileWeight + " col3", 600);

});

这看起来像很多代码可能包含在jQuery UI函数或其他一些库中，当我把它放在一起时我就躲过了。有没有更简单，更简洁，或更简单的方法来做到这一点？解决方案不需要使用jQuery也不需要使用One％CSS Grid，任何库都可以。但是，它确实需要采用响应式布局，当div在彼此之上时，最好仍然可以正常运行。