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

[Anonymous]

У меня есть чистый CSS Classable Div, который основан на чужом коде, который использует: Target psuedoclass. То, что я пытаюсь настроить, - это страница с 12+ вопросами, и когда вы нажимаете кнопку + кнопку «Ответ», div расширяется внизу. Я не могу понять, как сделать несколько элементов разрушения DIV на этой странице, не написав тонну дополнительных CSS. У кого -нибудь есть предложения о том, как написать это, чтобы мой код CSS был сведен к минимуму? (т.е., поэтому мне не нужно вводить кучу уникальных селекторов для каждого из 12+ вопросов).
Я не могу использовать JavaScript, поскольку это происходит на сайте WordPress.com, который не разрешает js.
My jfiddle: htttp://jsfiddle.net/dmarvss/94uk. />

Код: Выделить всё

.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;
}< /code>

[url=#hide1]+[/url]
[url=#show1]-[/url]
 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

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