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

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