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

יצירת אקורדיון בלעדי עם מספר רכיבי <details> בעלי אותו name.

האקורדיון

תבנית נפוצה של ממשק משתמש באינטרנט היא רכיב אקורדיון. זהו רכיב שמורכב מכמה ווידג'טים של גילוי נאות, שכל אחד מהם יכול להרחיב (או לכווץ) כדי לחשוף (או להסתיר) את התוכן שלו.

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