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

Question

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

Answer 1

您可以在左栏的右侧（或右栏的左侧）应用边框，如下所示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;