bootstrap Pure CSS collapse/expand div




show calendar in html (4)

لدي div قابل للطي CSS خالٍ والذي يستند إلى رمز شخص آخر يستخدم :target psuedoclass :target . ما أحاول إعداده هو صفحة تحتوي على أكثر من 12 سؤالًا ، وعندما تنقر على الزر + يتوسع إجابة الإجابة أسفل. لا يمكنني معرفة كيفية إنشاء عدة عناصر div مطوية على هذه الصفحة بدون كتابة الكثير من CSS الإضافي. أي شخص لديه اقتراحات حول كيفية كتابة هذا بحيث يتم تصغير رمز CSS الخاص بي؟ (أي ، لذلك أنا لا أميل إلى إدخال مجموعة من المحددات الفريدة لكل من الأسئلة 12+).

لا يمكنني استخدام Javascript نظرًا لأن هذا يجري على موقع 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;
}

Answer #1

أو نسخة بسيطة للغاية مع بالكاد أي 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/


Answer #2

تحتاج فقط إلى تكرار المراسي في الوصلتين.

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

شاهد jsfiddle هذا http://jsfiddle.net/eJX8z/

أضفت أيضًا بعض الهامش إلى استدعاء الأسئلة الشائعة لتحسين التنسيق.


Answer #3

استنادًا إلى المتصفحات / الأجهزة التي تتطلع إلى دعمها ، أو ما أنت على استعداد لاستقباله للمتصفحات غير المتوافقة ، قد ترغب في <summary> العلامات <summary> و <detail> . هم لهذا الغرض بالضبط. لا يلزم css إطلاقا لأن الانهيار والعرض هما جزء من تعريف / تنسيق العلامات.

لقد قدمت مثالاً here :

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

يختلف دعم المتصفح. حاول في webkit للحصول على أفضل النتائج. قد المتصفحات الأخرى الافتراضية لإظهار كل الحلول. ربما يمكنك الرجوع إلى طريقة إخفاء / إظهار الموضحة أعلاه.


Answer #4

الجواب gbtimmon كبيرة ، ولكن الطريق ، معقدة للغاية. لقد بسّطت شفرته قدر الإمكان.

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: initial; 
}
<a href="#hide" id="hide">Show</a>
<a href="#" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>





collapsable