शुद्ध सीएसएस पतन / div का विस्तार

Question 1

मेरे पास एक शुद्ध CSS collapsable div है जो किसी और के कोड पर आधारित है जो :targetpsuedoclass का उपयोग करता है । मैं जो सेट करने का प्रयास कर रहा हूं, वह 12+ प्रश्नों वाला एक पृष्ठ है, और जब आप + बटन पर क्लिक करते हैं, तो उत्तर div नीचे विस्तृत हो जाती है। मैं इस पृष्ठ पर अतिरिक्त सीएसएस का एक टन लिखे बिना एकाधिक टकराने वाले दिव्य तत्वों को बनाने का तरीका नहीं जान सकता। किसी के पास सुझाव है कि यह कैसे लिखें ताकि मेरा सीएसएस कोड कम से कम हो? (यानी, इसलिए मुझे 12+ प्रश्नों में से प्रत्येक के लिए अद्वितीय चयनकर्ताओं का एक समूह इनपुट करना होगा)।

मैं जावास्क्रिप्ट का उपयोग नहीं कर सकता क्योंकि यह एक 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;
}

Question 2

इस बात पर निर्भर करता है कि आप किन ब्राउज़रों / उपकरणों का समर्थन करना चाहते हैं, या आप उन गैर-अनुरूप ब्राउज़रों के लिए क्या तैयार करने के लिए तैयार हैं जो आप टैग <summary>और <detail>टैग की जाँच करना चाहते हैं । वे वास्तव में इस उद्देश्य के लिए हैं। किसी भी सीएसएस की आवश्यकता नहीं है क्योंकि ढहने और दिखाने के टैग परिभाषा / स्वरूपण का हिस्सा हैं।

मैंने यहां एक उदाहरण दिया है :

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

ब्राउज़र समर्थन बदलता है। सर्वोत्तम परिणामों के लिए वेबकिट में प्रयास करें। अन्य ब्राउज़र सभी समाधानों को दिखाने में डिफ़ॉल्ट हो सकते हैं। आप शायद ऊपर बताए गए छिपाने / दिखाने की विधि में वापस आ सकते हैं।

Question 3

का उपयोग कर `<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>तत्व (एचटीएमएल 5 डॉक्टर) (थोड़ा मुश्किल सा)।

शुद्ध 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>

स्निपेट का विस्तार करें

Question 4

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

स्निपेट का विस्तार करें

Question 5

आपको केवल दो लिंक में एंकरों को पुनरावृत्त करना होगा।

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

इस jsfiddle http://jsfiddle.net/eJX8z/ को देखें

मैंने प्रारूप में सुधार के लिए एफएक्यू कॉल में कुछ मार्जिन भी जोड़ा।

Question 6

या किसी भी सीएसएस के साथ एक सुपर सरल संस्करण :)

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

शुद्ध सीएसएस पतन / div का विस्तार

का उपयोग कर <summary>और<details>

शुद्ध CSS3

का उपयोग कर `<summary>`और`<details>`