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

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

Bramus

האקורדיון

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

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

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

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

Browser Support

• 120
• 120
• 130
• 17.2

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

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

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

הוספת קוד למילוי חסר (polyfill) לאקורדיון הבלעדי

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