单击标题列时如何隐藏一组列并显示它们？

【问题标题】：How to hide a group of columns and show them when a header column is clicked?单击标题列时如何隐藏一组列并显示它们？
【发布时间】：2015-06-25 00:40:17
【问题描述】：

我正在使用 Bootstrap 3，并且已经将顶部分为两列。我需要在不使用 JavaScript 或 jQuery 的情况下在示例图像中重新创建设计。这样当我点击“快速信息”时，就会出现一组新的列（包含快速信息）。

【问题讨论】：

完全不知道问题是什么：/
链接是什么意思？您只是想计算出 div 的位置吗？
放上你现在使用的代码
要制作分隔符，可以使用 CSS 边框属性。在第二个 col-md-6 上使用border-left 或在第一个 col-md-6 上使用border-right。其次，要链接顶部，您可以使用 Back to top 其中 ID 可以是页面顶部的任何 ID，例如用于导航容器的 #nav 或用于内容的 #content容器
@TylerH 非常感谢你。我会做得更好。

标签： html css twitter-bootstrap

【解决方案1】：

您可以像这样在左列的右侧（或右列的左侧）应用边框：

.split-left {
  text-align: center;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.split-right {
  text-align: center;
  border-bottom: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-6 split-left">LEFT COLUMN</div>
    <div class="col-xs-6 split-right">RIGHT COLUMN</div>
  </div>
  </div

【讨论】：

很遗憾，如果您阅读正文，与标题中的问题无关。
感谢@DavidG，尽管我的问题含糊不清，但您在第一部分提供了帮助：)