דף זה תורגם על ידי Cloud Translation API.

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

יצירת חלונית נפתחת בלעדית עם כמה רכיבי <details> שיש להם את אותו name.

Bramus

האקורדיון

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

כדי להטמיע את הדפוס הזה באינטרנט, משלבים כמה אלמנטים של <details> ובדרך כלל מקובצים אותם באופן חזותי כדי לציין שהם שייכים יחד.

דוגמה: אקורדיון עם HTML ו-CSS.

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

תמיכה בדפדפנים

וריאציה של תבנית האקורדיון היא אקורדיון בלעדי, שבו אפשר לפתוח רק אחד מהווידג'טים של חשיפת המידע בו-זמנית.

כדי ליצור חלונית מתקפלת בלעדית באינטרנט, מוסיפים מאפיין 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>

דוגמה: פס מתקפל ייחודי ב-HTML וב-CSS.

בדף יכולים להיות כמה תיבות נפתחות בלעדיות. בכל פעם שמשתמשים בערך name חדש ברכיב <details>, נוצרת קבוצה לוגית חדשה.

הדגמה: מספר אקורציות בלעדיות ל-HTML ול-CSS.

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