html折叠div,纯CSS折叠/展开div

我有一个纯CSS可折叠div，它是基于别人的代码，使用：target伪造类。我想设置的是一个有12个问题的页面，当你点击按钮，答案div扩展下面。我不知道如何使多个折叠div元素在这个页面上，没有编写一个额外的CSS。任何人都有建议，如何写这个我的CSS代码最小化？ (即，因此我不必为12个问题中的每一个输入一束唯一选择器)。

我不能使用Javascript，因为这是一个wordpress.com网站不允许JS。

+

-

Question Question Question Question Question Question Question Question Question Question Question?

Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer

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

}