এক্সক্লুসিভ অ্যাকর্ডিয়ন

একই name একাধিক <details> উপাদান সহ একটি এক্সক্লুসিভ অ্যাকর্ডিয়ন তৈরি করুন।

ব্রামাস

অ্যাকর্ডিয়ন

ওয়েবে একটি সাধারণ UI প্যাটার্ন হল একটি অ্যাকর্ডিয়ন উপাদান। এটি এমন একটি উপাদান যা বেশ কয়েকটি প্রকাশের উইজেট নিয়ে গঠিত যা তাদের বিষয়বস্তু প্রকাশ (বা লুকিয়ে) করার জন্য পৃথকভাবে প্রসারিত (বা সংকোচন) করা যেতে পারে।

ওয়েবে এই প্যাটার্নটি বাস্তবায়ন করার জন্য আপনি কয়েকটি <details> উপাদান একত্রিত করুন এবং সাধারণত এগুলিকে দৃশ্যত গোষ্ঠীবদ্ধ করুন যাতে বোঝা যায় যে তারা একসাথে রয়েছে।

ডেমো: HTML এবং CSS সহ অ্যাকর্ডিয়ন।

একচেটিয়া অ্যাকর্ডিয়ন

ব্রাউজার সমর্থন

  • ক্রোম: 120।
  • প্রান্ত: 120।
  • ফায়ারফক্স: 130।
  • সাফারি: 17.2।

অ্যাকর্ডিয়ন প্যাটার্নের একটি ভিন্নতা হল একচেটিয়া অ্যাকর্ডিয়ন , যেখানে শুধুমাত্র একটি ডিসক্লোজার উইজেট একই সময়ে খোলা যেতে পারে।

ওয়েবে একটি এক্সক্লুসিভ অ্যাকর্ডিয়ন তৈরি করতে আপনি <details> উপাদানগুলিতে একটি name বৈশিষ্ট্য যোগ করুন। যখন এই অ্যাট্রিবিউটটি ব্যবহার করা হয়, একই name মান আছে এমন একাধিক <details> উপাদানগুলি একটি শব্দার্থিক গোষ্ঠী গঠন করে এবং তারা একটি একচেটিয়া অ্যাকর্ডিয়ন হিসাবে আচরণ করবে। আপনি যখন গ্রুপ থেকে <details> উপাদানগুলির একটি খুলবেন, পূর্বে খোলা একটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে। 

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>
ডেমো: HTML এবং CSS এর সাথে একচেটিয়া অ্যাকর্ডিয়ন।

একটি পৃষ্ঠায় একাধিক এক্সক্লুসিভ অ্যাকর্ডিয়ন থাকতে পারে। যখনই আপনি একটি <details> উপাদানে একটি নতুন name মান ব্যবহার করেন, একটি নতুন লজিক্যাল গ্রুপ তৈরি হয়।

ডেমো: HTML এবং CSS সহ একাধিক এক্সক্লুসিভ অ্যাকর্ডিয়ন।

যে <details> উপাদানগুলি একটি একচেটিয়া অ্যাকর্ডিয়নের অংশ সেগুলি অগত্যা ভাইবোন হওয়ার দরকার নেই৷ তারা নথি জুড়ে ছড়িয়ে ছিটিয়ে থাকতে পারে। এটি name বৈশিষ্ট্য যা তাদের গ্রুপ করে, তাদের DOM অর্ডার নয়।

একচেটিয়া অ্যাকর্ডিয়ন পলিফিল করুন

নিম্নলিখিত জাভাস্ক্রিপ্টের সাহায্যে এক্সক্লুসিভ অ্যাকর্ডিয়নের আচরণকে পলিফিল করা সম্ভব। কোডটি <details> উপাদানের toggle ইভেন্টের উপর নির্ভর করে।

যখন একটি name সাথে একটি <details> উপাদান খোলে, কোডটি name বৈশিষ্ট্যের জন্য একই মান সহ অন্যান্য খোলা <details> উপাদানগুলি খুঁজে পায় এবং সেগুলি বন্ধ করে দেয়।

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

ব্রাউজারগুলির কিছু পুরানো সংস্করণ এই toggle ইভেন্টটি চালু করে না। এই ব্রাউজারগুলিতে পলিফিল কোড কিছুই করবে না। প্রগতিশীল বর্ধনের ক্ষেত্রে, এটি গ্রহণযোগ্য আচরণ।