Pure CSS collapse/expand div

Question

У меня есть чистый CSS-разборный div, который основан на чужом коде, который использует psedoclass :target. То, что я пытаюсь настроить, - это страница с 12 + вопросами, и когда вы нажимаете кнопку +, ответ div расширяется ниже. Я не могу понять, как сделать несколько сворачивающихся элементов div на этой странице без написания тонны дополнительного CSS. У кого-нибудь есть предложения по написанию этого, поэтому мой CSS-код сведен к минимуму? (т. е. поэтому мне не нужно вводить кучу уникальных селекторов для каждого из 12+ вопросов).

Я не могу использовать Javascript, так как это происходит на сайте wordpress.com, который не позволяет JS.

Вот мой 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

Вам просто нужно перебирать якоря в две ссылки.

<a href="#hide2" class="hide" id="hide2">+</a> 
<a href="#show2" class="show" id="show2">-</a> 

Смотрите эту jsfiddle http://jsfiddle.net/eJX8z/

Я также добавил некоторый запас для часто задаваемых вопросов вызова, чтобы улучшить формат.

Answer 2

Или супер простая версия с едва любой CSS :)

<style> 
.faq ul li { 
    display:block; 
    float:left; 
    padding:5px; 
} 

.faq ul li div { 
    display:none; 
} 

.faq ul li div:target { 
    display:block; 
} 


</style> 


<div class="faq"> 
    <ul> 
    <li><a href="#question1">Question 1</a> 
    <div id="question1">Answer 1 </div> 
    </li> 


    <li><a href="#question2">Question 2</a> 
    <div id="question2">Answer 2 </div> 
    </li> 
    <li><a href="#question3">Question 3</a> 
    <div id="question3">Answer 3 </div> 
    </li> 
    <li><a href="#question4">Question 4</a> 
    <div id="question4">Answer 4 </div> 
    </li> 
    <li><a href="#question5">Question 5</a> 
    <div id="question5">Answer 5 </div> 
    </li> 
    <li><a href="#question6">Question 6</a> 
    <div id="question6">Answer 6 </div> 
    </li> 
    </ul> 
</div> 

http://jsfiddle.net/ionko22/4sKD3/

Answer 3

В зависимости от того, что браузеры/устройства вы хотите поддержать, или то, что вы готовы мириться с не для совместимые браузеры, вы можете проверить теги <summary> и <detail>. Они предназначены именно для этой цели. Никакой css вообще не требуется, поскольку свертывание и показ являются частью определения/форматирования тегов.

Я сделал пример 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 в WebKit для достижения наилучших результатов. Другие браузеры могут по умолчанию показывать все решения. Возможно, вы можете вернуться к методу hide/show, описанному выше.

Answer 4

@gbtimmon Ответ велик, но путь слишком сложный. Я упростил его код настолько, насколько это возможно.

#answer, 
 
#show, 
 
#hide:target { 
 
    display: none; 
 
} 
 

 
#hide:target + #show, 
 
#hide:target ~ #answer { 
 
    display: initial; 
 
}

<a href="#hide" id="hide">Show</a> 
 
<a href="#" id="show">Hide</a> 
 
<div id="answer"><p>Answer</p></div>

Answer 5

Использование <summary> и <details>

Использование <summary> и <details> элементов является самым простым, но видеть, как browser support ток IE не поддерживает его. Вы можете polyfill хотя (большинство из них основано на jQuery). Обратите внимание, что неподдерживаемый браузер просто покажет расширенную версию, поэтому это может быть приемлемо в некоторых случаях.

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

Смотрите также how to style the <details> element (HTML5 Doctor) (немного сложнее).

Чистого CSS3

Селектор :target имеет довольно хороший browser support, и он может быть использован, чтобы сделать единой складной элемент внутри рамы.

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

См How to Make Collapsing Lists Without Java | eHow.

Answer 6

Что-то вроде этого?

document.getElementById("control").addEventListener('click', function() { 
 
    var props = document.getElementsByClassName("property"); 
 
    for (var i = 0; i < props.length; i++) { 
 
    props[i].classList.toggle("show"); 
 
    } 
 
});

#control{ 
 
    height:24px; 
 
    width:24px; 
 
    background:blue; 
 
} 
 
.property{ 
 
    height:0px; 
 
    overflow: hidden; 
 
    transition: 4s ease-in-out; 
 
    font-size:0px; 
 
    margin:0; 
 
    border:1px solid green; 
 
} 
 
.show{ 
 
    height:1em; 
 
    overflow:initial; 
 
    font-size:12px; 
 
}

<div id="control"></div> 
 
<div class="property">red</div> 
 
<div class="property">blue</div> 
 
<div class="property">green</div>