HTML/CSS 中的可折叠面板

Collapsible Panel in HTML/CSS

提问by xisk

I'm putting together a website. I need help creating the following feature:

我正在整理一个网站。我需要帮助创建以下功能：

I want the "About" link to expand into a panel when clicked, and retract when the user presses "hide" in the panel. I've attached a diagram below to clarify what it should look like. When the user presses About in (1), it becomes (2), and when the user presses hide in (2), it becomes (1) again.

我希望“关于”链接在单击时展开为面板，并在用户按下面板中的“隐藏”时收回。我在下面附上了一张图表来阐明它应该是什么样子。当用户在（1）中按下 About 时，变为（2），当用户在（2）中按下 hide 时，再次变为（1）。

I would like to do this in pure HTML/CSS, if possible. Does anyone know how I can do this?

如果可能，我想在纯 HTML/CSS 中执行此操作。有谁知道我怎么能做到这一点？

回答by adaam

This answer explains how it can be achieved in full: Pure CSS collapse/expand div

这个答案解释了如何完全实现：Pure CSS collapse/expand div

Here is a quick rundown:

这是一个快速概述：

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

CSS

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
  vertical-align: top; 
  height: auto; 
}

.list {
  display:none; 
  height:auto;
  margin:0;
  float: left;
}

.show {
  display: none; 
}

.hide:target + .show {
  display: inline; 
}
.hide:target {
  display: none; 
}
.hide:target ~ .list {
  display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 0 #666;
  text-align: center;
  text-decoration: none;
  box-shadow: 1px 1px 2px #000;
  background: #cccbbb;
  opacity: .95;
  margin-right: 0;
  float: left;
  margin-bottom: 25px;
}

.hide:hover, .show:hover {
  color: #eee;
  text-shadow: 0 0 1px #666;
  text-decoration: none;
  box-shadow: 0 0 4px #222 inset;
  opacity: 1;
  margin-bottom: 25px;
}

.list p {
  height:auto;
  margin:0;
}
.question {
  float: left;
  height: auto;
  width: 90%;
  line-height: 20px;
  padding-left: 20px;
  margin-bottom: 25px;
  font-style: italic;
}

And the working jsFiddle:

和工作jsFiddle：

http://jsfiddle.net/dmarvs/94ukA/4/

http://jsfiddle.net/dmarvs/94ukA/4/

Again none of the above is my work just to clarify, but it just goes to show how easy it is to find it on Google!!

同样，以上所有内容都不是我的工作，只是为了澄清，但它只是表明在 Google 上找到它是多么容易！！

回答by Faishal

You need litle javascript to trigger an event (show/hide div)

你需要一点 javascript 来触发一个事件（显示/隐藏 div）

<a href="#"> Home </a>

<a class="right" href="javascript:toggle_messege('inline')" id='href_about'> About </a>
<br />
<a class="right hide" href="javascript:toggle_messege('none')" id='hreh_close'> (Close)</a>

<div id='div_messege' class='hide'>Hidden messege to show, Hidden messege to show Hidden messege to show Hidden messege to show</div>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>

CSS

CSS

.right {
    float:right;
}
.hide {
    display:none
}

javascript

javascript

function toggle_messege(type) {
 document.getElementById("div_messege").style.display = type;
    document.getElementById("hreh_close").style.display = type;

}

check this for running example http://codepen.io/faishal/pen/IHEyw

检查这个运行示例http://codepen.io/faishal/pen/IHEyw