แอคคอร์เดียนพิเศษ

สร้าง Accordion เฉพาะที่มีองค์ประกอบ <details> หลายรายการที่มี name เดียวกัน

Bramus

แอคคอร์เดียน

รูปแบบ UI ที่พบได้ทั่วไปบนเว็บคือคอมโพเนนต์แบบ Accordion ซึ่งเป็นคอมโพเนนต์ที่ประกอบด้วยวิดเจ็ตการเปิดเผยหลายรายการซึ่งสามารถขยาย (หรือยุบ) ทีละรายการเพื่อแสดง (หรือซ่อน) เนื้อหาได้

หากต้องการใช้รูปแบบนี้บนเว็บ คุณจะต้องรวมองค์ประกอบ <details> 2-3 รายการเข้าด้วยกัน และมักจะจัดกลุ่มองค์ประกอบเหล่านั้นเข้าด้วยกันเพื่อแสดงให้เห็นว่าองค์ประกอบเหล่านั้นเป็นของกันและกัน

แอคคอร์เดียนสุดพิเศษ

รูปแบบของ Accordion อีกรูปแบบหนึ่งคือ Accordion แบบพิเศษ ซึ่งจะเปิดวิดเจ็ตการเปิดเผยได้เพียงรายการเดียวพร้อมกัน

หากต้องการสร้างแอคคอร์เดียนพิเศษบนเว็บ ให้เพิ่มแอตทริบิวต์ name ลงในองค์ประกอบ <details> เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details> หลายรายการที่มีค่า name เดียวกันจะจัดกลุ่มตามความหมายและจะทํางานแบบ Accordion ที่ไม่ซ้ำกัน เมื่อคุณเปิดองค์ประกอบ <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>

หน้าเว็บหนึ่งๆ อาจมี Accordion ที่ไม่ซ้ำกันหลายรายการ เมื่อใดก็ตามที่คุณใช้ค่า name ใหม่ในองค์ประกอบ <details> ระบบจะสร้างกลุ่มเชิงตรรกะใหม่

องค์ประกอบ <details> ที่อยู่ใน Accordion แบบพิเศษไม่จำเป็นต้องเป็นองค์ประกอบพี่น้อง ซึ่งอาจกระจัดกระจายอยู่ทั่วเอกสาร แอตทริบิวต์ name จะเป็นตัวจัดกลุ่ม ไม่ใช่ลําดับ DOM

แสดงโฆษณาแบบโฆษณาแบบ Accordion เฉพาะ

ด้วย 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 จะไม่ทํางาน ในแง่ของการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอน ลักษณะการทำงานนี้เป็นสิ่งที่ยอมรับได้