我正在组建一个网站.我需要帮助创建以下功能：
我希望“关于”链接在单击时展开到面板中,并在用户按下面板中的“隐藏”时收回.我在下面附上了一张图表来说明它应该是什么样子.当用户在(1)中按下约时,它变为(2),并且当用户按下(2)中的隐藏时,它再次变为(1).
如果可能的话,我想在纯HTML / CSS中这样做.有谁知道我怎么做到这一点？
解决方法
这个答案解释了如何完全实现：
Pure CSS collapse/expand div
这是一个快速纲要：
<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
/* 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;
}
和工作的jsFiddle：
http://jsfiddle.net/dmarvs/94ukA/4/
再一次,上述所有内容都不是我的工作,只是为了澄清,但它只是表明在Google上找到它是多么容易！
