Collapsible Panel in HTML/CSS

Question

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.

layout

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

@Mr.Alien: that's very unhelpful. This is a pretty elementary feature. It can't be difficult to implement. — xisk, May 11 '13 at 19:29
We don't write stuff from scratch here, so you need to come up with your codes which don't work and we fix it for you, so try it yourself, if you get stuck, ask a question here and will help you — Mr. Alien, May 11 '13 at 19:30
Because I don't know how to do it. That's why I'm asking for help. I'm not very experienced with HTML and CSS. — xisk, May 11 '13 at 19:30
Or read some books, online tutorials, documentations. You should at least come up with something (codes) before you ask a question here. — Antony, May 11 '13 at 19:36

adaam · Accepted Answer · 2018-04-16T16:47:33.980

This answer explains how it can be achieved in full: 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

/* 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:

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

This works fine if you have one row. But how can you make this work if you have multiple rows (a + button on each row)? — Chris Nielsen, Apr 13 '18 at 15:43
@ChrisNielsen I would just use JavaScript (this answer was a very long time ago now!!). But here is the CSS only version for multiple: http://jsfiddle.net/94ukA/4535/ The `:target` selector captures the ID from the `href` — adaam, Apr 16 '18 at 16:43

score 5 · Answer 2 · answered May 11 '13 at 19:51

You need litle javascript to trigger an event (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;

}

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

I could not get the CSS to work reliably across browsers. Thanks for the tip on using javascript, this works well! — Mmm, Nov 11 '15 at 21:18
You do not “need” Javascript, as adaam's and [Thurstan's](https://stackoverflow.com/a/15742338/2230956) answers demonstrate. — Gid, Jan 10 '18 at 04:50

Collapsible Panel in HTML/CSS

2 Answers2

Linked