Mam czysty, :targetzwijany element DIV CSS oparty na kodzie innej osoby korzystającej z psuedoclass. Próbuję skonfigurować stronę z ponad 12 pytaniami, a po kliknięciu przycisku + element div odpowiedzi rozwija się poniżej. Nie potrafię wymyślić, jak utworzyć wiele zwijanych elementów div na tej stronie bez pisania mnóstwa dodatkowego kodu CSS. Czy ktoś ma sugestie, jak to napisać, aby zminimalizować mój kod CSS? (tzn. nie muszę wprowadzać wielu unikalnych selektorów dla każdego z ponad 12 pytań).

Nie mogę używać Javascript, ponieważ dzieje się to w witrynie wordpress.com, która nie zezwala na JS.

Oto mój 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;
}

W zależności od tego, jakie przeglądarki / urządzenia chcesz obsługiwać, lub na co jesteś przygotowany w przypadku niezgodnych przeglądarek, możesz sprawdzić tagi <summary>i <detail>. Służą dokładnie do tego celu. W ogóle nie jest wymagany css, ponieważ zwijanie i wyświetlanie są częścią definicji / formatowania tagów.

Zrobiłem tutaj przykład :

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

Obsługiwane przeglądarki są różne. Wypróbuj zestaw internetowy, aby uzyskać najlepsze wyniki. Inne przeglądarki mogą domyślnie wyświetlać wszystkie rozwiązania. Być może możesz wrócić do metody ukrywania / pokazywania opisanej powyżej.

Korzystanie <summary>i<details>

Korzystanie z elementów <summary>i <details>jest najprostsze, ale zobacz obsługę przeglądarki, ponieważ obecny IE jej nie obsługuje. Możesz jednak wypełnić polyfill (większość z nich jest oparta na jQuery). Pamiętaj, że nieobsługiwana przeglądarka pokaże oczywiście po prostu rozszerzoną wersję, więc w niektórych przypadkach może to być dopuszczalne.

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

Zobacz także, jak stylizować <details>element (HTML5 Doctor) (trochę skomplikowane).

Czysty CSS3

:targetSelektor ma bardzo dobrą obsługę przeglądarki , a to może być wykorzystane do dokonania jednego składany elementu wewnątrz ramki.

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

Odpowiedź @ gbtimmon jest świetna, ale zdecydowanie zbyt skomplikowana. Uprościłem jego kod tak bardzo, jak tylko mogłem.

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

Wystarczy powtórzyć zakotwiczenia w dwóch łączach.

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

Zobacz to jsfiddle http://jsfiddle.net/eJX8z/

Dodałem również trochę marginesu do wezwania do FAQ, aby poprawić format.

Lub super prosta wersja z prawie żadnym 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/