אקורדיון בלעדי

יצירת חלונית נפתחת בלעדית עם כמה רכיבי <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.

הוספת פוליפיל לאקורדיון הבלעדי

באמצעות הקוד הבא ב-JavaScript אפשר להוסיף polyfill להתנהגות של האקורדיון הבלעדי. הקוד מסתמך על האירוע 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 לא יבצע שום פעולה. כשמדובר בשיפור מתקדם, זו התנהגות מקובלת.