Складная панель в HTML/CSS

Я собираю веб-сайт. Мне нужна помощь в создании следующей функции:

Я хочу, чтобы ссылка "About" расширялась на панель при нажатии и оттягивалась, когда пользователь нажимает "скрыть" на панели. Я приложил диаграмму ниже, чтобы уточнить, как это должно выглядеть. Когда пользователь нажимает "О программе" в (1), он становится (2), и когда пользователь нажимает кнопку "Скрыть" (2), он снова становится (1).

Я хотел бы сделать это в чистом HTML/CSS, если это возможно. Кто-нибудь знает, как я могу это сделать?

Ответ 1

В этом ответе объясняется, как это можно добиться в полном объеме: Чистый 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:

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

Опять же, ни одна из перечисленных выше не является моей работой, просто для уточнения, но она просто показывает, как легко найти ее в Google!

Ответ 2

Вам нужно litle javascript для запуска события (show/hide 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

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

Javascript

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

}

проверьте это для запуска примера http://codepen.io/faishal/pen/IHEyw