খাঁটি সিএসএস পতন / বিস্তৃত বিভাজন

Question 1

আমার কাছে একটি খাঁটি সিএসএস :targetসংযোগযোগ্য ডিভ রয়েছে যা অন্য কারও কোডের উপর ভিত্তি করে যারা পিচিউডক্লাস ব্যবহার করে । আমি যা সেট আপ করার চেষ্টা করছি তা হল 12+ টি প্রশ্নের একটি পৃষ্ঠা এবং আপনি যখন + বোতামটি ক্লিক করেন তখন উত্তর ডিভিটি নীচে প্রসারিত হয়। এক টন অতিরিক্ত সিএসএস না লিখে এই পৃষ্ঠায় কীভাবে একাধিক সংঘাতের ডিভ উপাদান তৈরি করা যায় তা আমি বুঝতে পারি না। আমার সিএসএস কোডটি ন্যূনতম করার জন্য কীভাবে এটি লিখতে হবে সে সম্পর্কে কারও কাছে পরামর্শ রয়েছে? (উদাহরণস্বরূপ, সুতরাং 12+ প্রশ্নের প্রত্যেকটির জন্য আমার একচেটিয়া অনন্য নির্বাচক থাকতে হবে না)।

আমি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি না কারণ এটি একটি ওয়ার্ডপ্রেস ডটকম সাইটে চলছে যা জেএসকে অনুমতি দেয় না।

এখানে আমার জফিল: 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>উপাদানগুলি সহজতম তবে বর্তমানের আইই এটি সমর্থন করছে না বলে ব্রাউজার সমর্থন দেখুন । আপনি পলিফিল করতে পারেন (বেশিরভাগ 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

@ জিবিটিমমনের উত্তর দুর্দান্ত, তবে উপায়, খুব জটিল। আমি তার কোডটি যতটা পারি সহজ করেছি।

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

আমি ফর্ম্যাটটি উন্নত করতে FAQ কলটিতে কিছু মার্জিন যুক্ত করেছি।

Question 6

সবেমাত্র যে কোনও 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/

খাঁটি সিএসএস পতন / বিস্তৃত বিভাজন

ব্যবহার <summary>এবং<details>

খাঁটি CSS3

ব্যবহার `<summary>`এবং`<details>`