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

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

Bramus

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

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

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

ตัวอย่าง: Accordion ด้วย HTML และ CSS

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

การรองรับเบราว์เซอร์

• 120
• 120
• 130
• 17.2

รูปแบบของ Accordion อีกรูปแบบหนึ่งคือ 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 พิเศษด้วย HTML และ CSS

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

ตัวอย่าง: กล่องแอคคอร์เดียนแบบพิเศษหลายรายการด้วย HTML และ CSS

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

ข้อควรระวัง: ก่อนใช้ Accordion แบบพิเศษ ให้พิจารณาว่ามีประโยชน์หรือเป็นอันตรายต่อผู้ใช้ แม้ว่าการใช้ Accordion แบบพิเศษจะช่วยลดพื้นที่ในการแสดงเนื้อหา แต่ผู้ใช้อาจต้องเปิดหลายรายการเพื่อค้นหาข้อมูล ซึ่งอาจทำให้ผู้ใช้ที่ต้องการดูหลายรายการพร้อมกันไม่พอใจ

ใส่ Polyfill ของ Accordion พิเศษ

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