Чистый CSS COLLAPSSE/EXCAND DIV ⇐ CSS

[Anonymous]

У меня есть чистый CSS Classable Div, который основан на чужом коде, который использует: Target psuedoclass. То, что я пытаюсь настроить, - это страница с 12+ вопросами, и когда вы нажимаете кнопку + кнопку «Ответ», div расширяется внизу. Я не могу понять, как сделать несколько элементов разрушения DIV на этой странице, не написав тонну дополнительных CSS. У кого -нибудь есть предложения о том, как написать это, чтобы мой код CSS был сведен к минимуму? (т.е., поэтому мне не нужно вводить кучу уникальных селекторов для каждого из 12+ вопросов). < /p>

Я не могу использовать JavaScript, так как это происходит на сайте WordPress.com, который не разрешает JS. http://jsfiddle.net/dmarvs/94uka/4/


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


< /code>

/* source: http://www.ehow.com/how_12214447_make-c ... -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;
}


Подробнее здесь: https://stackoverflow.com/questions/150 ... expand-div