Tôi có một div có thể thu gọn CSS thuần túy dựa trên mã của người khác, người sử dụng :targettân cổ điển. Những gì tôi đang cố gắng thiết lập là một trang có hơn 12 câu hỏi và khi bạn nhấp vào nút +, div câu trả lời sẽ mở rộng bên dưới. Tôi không thể tìm ra cách tạo nhiều phần tử div thu gọn trên trang này mà không cần viết thêm nhiều CSS. Bất cứ ai có đề xuất về cách viết điều này để mã CSS của tôi được giảm thiểu? (tức là, tôi không phải nhập một loạt các bộ chọn duy nhất cho mỗi câu hỏi trong số hơn 12 câu hỏi).

Tôi không thể sử dụng Javascript vì nó đang diễn ra trên một trang web wordpress.com không cho phép JS.

Đây là jfiddle của tôi: 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;
}

Tùy thuộc vào trình duyệt / thiết bị mà bạn đang tìm kiếm để hỗ trợ hoặc những gì bạn chuẩn bị sẵn sàng để áp dụng cho các trình duyệt không tuân thủ mà bạn có thể muốn xem các thẻ <summary>và <detail>. Chúng là chính xác cho mục đích này. Không cần css nào cả vì việc thu gọn và hiển thị là một phần của định nghĩa / định dạng thẻ.

Tôi đã làm một ví dụ ở đây :

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

Hỗ trợ trình duyệt khác nhau. Hãy thử trong bộ web để có kết quả tốt nhất. Các trình duyệt khác có thể mặc định hiển thị tất cả các giải pháp. Bạn có thể dự phòng cho phương pháp ẩn / hiện được mô tả ở trên.

Sử dụng <summary>và<details>

Sử dụng <summary>và <details>các phần tử là đơn giản nhất nhưng hãy xem hỗ trợ trình duyệt vì IE hiện tại không hỗ trợ. Tuy nhiên, bạn có thể polyfill (hầu hết đều dựa trên jQuery). Xin lưu ý rằng trình duyệt không được hỗ trợ tất nhiên sẽ hiển thị phiên bản mở rộng, vì vậy điều đó có thể được chấp nhận trong một số trường hợp.

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

Xem thêm cách tạo kiểu cho <details>phần tử (HTML5 Doctor) (hơi phức tạp).

CSS3 thuần túy

Bộ :targetchọn có hỗ trợ trình duyệt khá tốt và nó có thể được sử dụng để tạo một phần tử thu gọn duy nhất trong khung.

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

Câu trả lời của @ gbtimmon rất hay, nhưng cách, quá phức tạp. Tôi đã đơn giản hóa mã của anh ấy nhiều nhất có thể.

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

Bạn chỉ cần lặp lại các neo trong hai liên kết.

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

Xem jsfiddle này http://jsfiddle.net/eJX8z/

Tôi cũng đã thêm một số lợi nhuận vào lệnh gọi Câu hỏi thường gặp để cải thiện định dạng.

Hoặc một phiên bản siêu đơn giản với hầu như không có bất kỳ css nào :)

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