Saya memiliki div collapsable CSS murni yang didasarkan pada kode orang lain yang menggunakan :targetpsuedoclass. Apa yang saya coba siapkan adalah halaman dengan 12+ pertanyaan, dan ketika Anda mengklik tombol + div jawaban meluas di bawahnya. Saya tidak tahu cara membuat beberapa elemen div yang runtuh di halaman ini tanpa menulis banyak CSS tambahan. Adakah yang punya saran tentang cara menulis ini sehingga kode CSS saya diminimalkan? (yaitu, jadi saya tidak perlu memasukkan banyak pemilih unik untuk masing-masing dari 12+ pertanyaan).

Saya tidak dapat menggunakan Javascript karena ini terjadi di situs wordpress.com yang tidak mengizinkan JS.

Ini jfiddle saya: 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;
}

Bergantung pada browser / perangkat apa yang ingin Anda dukung, atau apa yang Anda siapkan untuk browser yang tidak sesuai, Anda mungkin ingin memeriksa tag <summary>dan <detail>. Mereka tepat untuk tujuan ini. Tidak diperlukan css sama sekali karena menutup dan menampilkan adalah bagian dari definisi / pemformatan tag.

Saya telah membuat contoh di sini :

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

Dukungan browser bervariasi. Coba di webkit untuk hasil terbaik. Browser lain mungkin secara default menampilkan semua solusi. Anda mungkin dapat kembali ke metode sembunyikan / tampilkan yang dijelaskan di atas.

Menggunakan <summary>dan<details>

Penggunaan <summary>dan <details>elemen adalah yang paling sederhana tetapi lihat dukungan browser karena IE saat ini tidak mendukungnya. Anda dapat melakukan polyfill (sebagian besar berbasis jQuery). Perhatikan bahwa browser yang tidak didukung tentu saja hanya akan menampilkan versi yang diperluas, jadi itu mungkin dapat diterima dalam beberapa kasus.

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

Lihat juga bagaimana memberi style pada <details>elemen (HTML5 Doctor) (sedikit rumit).

CSS3 murni

The :targetpemilih memiliki cukup bagus dukungan browser , dan dapat digunakan untuk membuat satu elemen dilipat dalam bingkai.

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

Jawaban @ gbtimmon bagus, tapi terlalu rumit. Saya telah menyederhanakan kodenya sebanyak yang saya bisa.

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

Anda hanya perlu mengulang jangkar di dua tautan.

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

Lihat jsfiddle http://jsfiddle.net/eJX8z/ ini

Saya juga menambahkan beberapa margin ke panggilan FAQ untuk meningkatkan format.

Atau versi super sederhana dengan hampir tidak ada 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/