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

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

Bramus

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

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

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

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

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

ওয়েবে এটি অর্জন করতে আপনি এখন <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>

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

মনে রাখবেন যে <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 ইভেন্টটি চালু করে না। এই ব্রাউজারগুলিতে পলিফিল কোড কিছুই করবে না। প্রগতিশীল বর্ধনের ক্ষেত্রে, এটি গ্রহণযোগ্য আচরণ।