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

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

Bramus

האקורדיון

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

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

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

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

תמיכה בדפדפן

• 120
• 120
• x
• 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.

פוליגונים לאקורדיון הבלעדי

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