HTML / CSS中的可折叠面板 [英] Collapsible Panel in HTML/CSS

问题描述

我把一个网站。我需要帮助创建以下功能：

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

我想要关于链接单击时展开到面板，当用户在面板中按隐藏 。我附上一个图表，以澄清它应该是什么样子。当用户在（1）中按下关于时，它变成（2），当用户在（2）中按下隐藏时，它变为（1）。

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.

img src =https://i.stack.imgur.com/xhPFE.pngalt =layout>

我想在纯HTML / CSS，如果可能的话。

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

推荐答案

这个答案解释了如何完全实现：纯CSS折叠/展开div

This answer explains how it can be achieved in full: 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 !important; 
}
.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：

And the working jsFiddle:

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!!

这篇关于HTML / CSS中的可折叠面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！