Składany panel w HTML/CSS

Question

Łączę stronę internetową. Potrzebuję pomocy przy tworzeniu następującej funkcji:

Chcę, aby link "O" rozwinął się w panelu po kliknięciu i chowa się, gdy użytkownik naciśnie "ukryj" w panelu. Załączam poniższy diagram, aby wyjaśnić, jak powinien wyglądać. Kiedy użytkownik naciśnie przycisk About in (1), staje się (2), a gdy użytkownik naciśnie przycisk schowania (2), ponownie staje się (1).

Chciałbym to zrobić w czystym HTML/CSS, jeśli to możliwe. Czy ktoś wie, jak mogę to zrobić?

Answer 1

działa

Ta odpowiedź wyjaśnia, w jaki sposób można to osiągnąć w całości: Pure CSS collapse/expand div

Oto szybki przegląd:

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

A jsFiddle pracy:

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

Znów żaden z powyżej jest moja praca, aby wyjaśnić, ale po prostu pokazuje, jak łatwo jest znaleźć go w Google !!

Answer 2

Trzeba litle javascript, aby wyzwolić zdarzenie (pokaż/ukryj 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; 

} 

sprawdzić to na przykład http://codepen.io/faishal/pen/IHEyw