Bir başkasının :targetpedoclass'ı kullanan koduna dayanan saf bir CSS daraltılabilir div'im var. Kurmaya çalıştığım şey, 12'den fazla soru içeren bir sayfadır ve + düğmesini tıkladığınızda, altındaki cevap bölümü genişler. Bir ton fazladan CSS yazmadan bu sayfada birden çok daraltılmış div öğesi yapmayı çözemiyorum. CSS kodumun küçültülmesi için bunu nasıl yazacağına dair önerileri olan var mı? (yani, 12+ sorunun her biri için bir grup benzersiz seçici girmem gerekmiyor).

JS'ye izin vermeyen bir wordpress.com sitesinde olduğu için Javascript kullanamıyorum.

İşte benim jfiddle'ım: 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;
}

Hangi tarayıcıları / cihazları desteklemek istediğinize veya uyumlu olmayan tarayıcılar için ne yapmaya hazır olduğunuza bağlı olarak <summary>ve <detail>etiketlerine göz atmak isteyebilirsiniz . Tam olarak bu amaç içindir. Daraltma ve gösterme, etiket tanımının / biçimlendirmesinin bir parçası olduğu için css gerekmez.

Burada bir örnek yaptım :

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

Tarayıcı desteği değişiklik gösterir. En iyi sonuçlar için webkit'te deneyin. Diğer tarayıcılar varsayılan olarak tüm çözümleri gösteriyor olabilir. Belki yukarıda açıklanan gizle / göster yöntemine geri dönebilirsiniz.

kullanılması <summary>ve<details>

<summary>Ve <details>öğelerini kullanmak en basit yöntemdir ancak mevcut IE tarafından desteklenmediği için tarayıcı desteğine bakın . Yine de çoklu doldurabilirsiniz (çoğu jQuery tabanlıdır). Desteklenmeyen tarayıcının elbette basitçe genişletilmiş sürümü göstereceğini unutmayın, bu nedenle bazı durumlarda bu kabul edilebilir.

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

Öğenin nasıl<details> stillendirileceğine de bakın (HTML5 Doctor) (biraz karmaşık).

Saf CSS3

:targetSeçici oldukça iyi vardır tarayıcı desteği ve bir hale getirmek için kullanılabilecek tek çerçeve içinde katlanabilir elemanı.

.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'un cevabı harika, ancak çok fazla karmaşık. Elimden geldiğince kodunu basitleştirdim.

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

Sadece iki bağlantıdaki bağlantıları yinelemeniz gerekir.

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

Bu jsfiddle'a bakın http://jsfiddle.net/eJX8z/

Ayrıca, biçimi iyileştirmek için SSS aramasına biraz marj ekledim.

Veya neredeyse hiç css içeren süper basit bir sürüm :)

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