آکاردئون انحصاری

یک آکاردئون انحصاری با چندین عنصر <details> که name یکسانی دارند ایجاد کنید.

Bramus

آکاردئون

یک الگوی رابط کاربری رایج در وب، یک جزء آکاردئونی است. این مؤلفه ای است که از چندین ویجت افشا تشکیل شده است که به صورت جداگانه می توان آنها را گسترش داد (یا جمع کرد) تا محتوای آنها آشکار شود (یا پنهان شود).

برای پیاده‌سازی این الگو در وب، چند عنصر <details> را ترکیب می‌کنید و معمولاً آنها را به صورت بصری گروه‌بندی می‌کنید تا نشان دهید که به یکدیگر تعلق دارند.

آکاردئون انحصاری

یکی از انواع الگوی آکاردئون، آکاردئون انحصاری است که در آن تنها یکی از ویجت‌های افشا را می‌توان همزمان باز کرد.

برای ایجاد یک آکاردئون انحصاری در وب، یک ویژگی name را به عناصر <details> اضافه می‌کنید. هنگامی که از این ویژگی استفاده می شود، چندین عنصر <details> که دارای مقدار name یکسانی هستند، یک گروه معنایی را تشکیل می دهند و به عنوان یک آکاردئون انحصاری رفتار می کنند. هنگامی که یکی از عناصر <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>

یک صفحه می تواند چندین آکاردئون منحصر به فرد داشته باشد. هر زمان که از یک مقدار name جدید در عنصر <details> استفاده می کنید، یک گروه منطقی جدید ایجاد می شود.

عناصر <details> که بخشی از یک آکاردئون انحصاری هستند لزوماً لازم نیست خواهر و برادر باشند. آنها می توانند در سراسر سند پراکنده شوند. این ویژگی name است که آنها را گروه بندی می کند، نه ترتیب DOM آنها.

آکاردئون انحصاری را پلی پر کنید

با جاوا اسکریپت زیر می‌توان رفتار آکاردئون انحصاری را چندگانه پر کرد. کد متکی به رویداد toggle عنصر <details> است.

وقتی یک عنصر <details> با name باز می شود، کد سایر عناصر <details> باز را با همان مقدار برای ویژگی name پیدا کرده و آنها را می بندد.

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 فعال نمی‌کنند. در آن مرورگرها کد polyfill کاری انجام نمی دهد. از نظر افزایش تدریجی ، این رفتار قابل قبول است.