У мене є чистий CSS-розбірний div, який базується на чужому коді, який використовує :targetpsuedoclass. Я намагаюся створити сторінку з 12+ запитаннями, і коли ви натискаєте кнопку +, відповідь 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;
}

Залежно від того, які браузери / пристрої ви хочете підтримати, або що ви готові змиритися з несумісними браузерами, ви можете перевірити теги <summary>та <detail>. Вони саме для цієї мети. CSS взагалі не потрібен, оскільки згортання та показ є частиною визначення / форматування тегів.

Я навів тут приклад :

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

Підтримка браузера різниться. Спробуйте веб-комплект для найкращих результатів. Інші браузери можуть за замовчуванням відображати всі рішення. Можливо, ви можете повернутися до методу приховування / показу, описаного вище.

Використання <summary>та<details>

Використання <summary>та <details>елементи є найпростішим, але ми бачимо підтримку браузера, оскільки поточний IE його не підтримує. Ви можете поліфіл заповнити (більшість із них засновані на 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>

Подивіться також, як стилізувати <details>елемент (HTML5 Doctor) (трохи хитро).

Чистий CSS3

:targetСелектор має дуже хорошу підтримку браузера , і він може бути використаний , щоб зробити єдиний розбірний елемент в кадрі.

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

Відповідь @ gbtimmon чудова, але занадто складна. Я спростив його код, наскільки міг.

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

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

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

Вам просто потрібно повторити анкери в двох посиланнях.

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

Див. Цей jsfiddle http://jsfiddle.net/eJX8z/

Я також додав деякий запас до дзвінка FAQ для покращення формату.

Або супер проста версія з ледве будь-яким 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/