单击后如何使某些内容看起来像标签

Question

好吧，所以标题可能不是描述我想要做的最好的方式，但我不确定如何用它来表达。

要开始（页面加载时），有20个“图块”用作页面上的按钮。他们是div。顶部的5更大，其余的行大小相同。

单击其中一个按钮后，我希望在单击按钮的行下显示div。我知道如何使用jquery切换来完成这个部分。这是一个单击按钮后我想要它的样子的例子。

您可以在图形中看到我希望它在点击后看起来像一个标签。我很难想到如何添加将按钮div关联到div中间的部分。这部分：

我有点想到我可以制作5张图片，每列按钮一张，背景颜色的一小部分，并切换图像。我相信有更好的方法可以做到这一点，所以我正在寻找正确方向的转向。我在搜索这样的东西时遇到了一些麻烦，因为我真的不知道该怎么称呼所以我想我会来这里寻求帮助。谢谢！

Answer 1

点击它时，我会增加图块的height（这样它会从上面的红线向下扩展到最后一张图片中显示的下面的红线）。

这一切都可以通过CSS完成（使用复选框hack与我this div相同的方式来增加其高度）或使用JavaScript（如果你想要IE8，尤其是IE7的可靠行为）。

Answer 2

喜欢这个小提琴：

http://jsfiddle.net/techunter/ph8vY/