Pure CSS collapse/expand div

Question

I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).

I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.

Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/

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

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

Answer 1

Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.

I've made an example here:

<details> <summary>This is what you want to show before expanding</summary> <p>This is where you put the details that are shown once expanded</p> </details> 

Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.

Answer 2

Using <summary> and <details>

Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.

/* Optional styling */  summary::-webkit-details-marker {    color: blue;  }  summary:focus {    outline-style: none;  }

<details>    <summary>Summary, caption, or legend for the content</summary>    Content goes here.  </details>

See also how to style the <details> element (HTML5 Doctor) (little bit tricky).

Pure CSS3

The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.

.details,  .show,  .hide:target {    display: none;  }  .hide:target + .show,  .hide:target ~ .details {    display: block;  }

<div>    <a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>    <a id="show1" href="#show1" class="show">- Summary goes here</a>    <div class="details">      Content goes here.    </div>  </div>  <div>    <a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>    <a id="show2" href="#show2" class="show">- Summary goes here</a>    <div class="details">      Content goes here.    </div>  </div>