สร้างหีบเพลงเฉพาะ HTML เพื่อซ่อนและเปิดเผยเนื้อหาโดยไม่ต้องใช้ JS หรือ CSS

คุณทราบหรือไม่ว่ามีโซลูชัน HTML5 แบบเนทีฟสำหรับสร้างปุ่มอ่านเพิ่มเติม/ลดหีบเพลงเพื่อซ่อนและเปิดเผยเนื้อหาด้วย ไม่มี JavaScript หรือ CSS. อ่านต่อไปเพื่อหาวิธีการ

พื้นที่ และ แท็ก HTML5 เป็นทางการa การเปิดเผยองค์ประกอบวิดเจ็ตแต่ จับคู่กับ แท็ก HTML5 จะทำให้คุณ หีบเพลง HTML เท่านั้นบริสุทธิ์.

ความหมาย ไม่มี JS หรือ CSS มันจำเป็น. เจ๋งแค่ไหน!

นี่คือตัวอย่างที่แสดงองค์ประกอบอย่างง่ายด้วย a และ .

นี่คือรหัส:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

และนี่คือลักษณะ:

อ่านเพิ่มเติม

นี่คือหีบเพลง HTML5 ดั้งเดิมเพื่อซ่อนและเปิดเผยเนื้อหา สวยเย็นใช่มั้ย?

มันทำงานอย่างไร? พื้นที่  แท็กทำหน้าที่เป็นเสื้อคลุมสำหรับองค์ประกอบที่สามารถเปิดหรือปิดได้ ผู้ใช้ต้องคลิกบนฉลากที่เป็น แท็กเพื่อเปิดหรือปิดองค์ประกอบ

สไตล์และพฤติกรรมเป็นอย่างไร?

รูปแบบ

คุณสามารถใช้สไตล์ CSS เพื่อปรับแต่งลักษณะที่ปรากฏของกล่องข้อความแสดง ด้านล่างแสดงสไตล์อินเทอร์เฟซแบบแท็บ:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

ตามค่าเริ่มต้น เคอร์เซอร์จะปรากฏเหมือนลูกศร แต่ถ้าคุณต้องการให้เป็น มือชี้ ให้ใช้สิ่งนี้แทน:

details {
cursor: pointer;
}

พฤติกรรม

พฤติกรรมการตั้งค่านั้นจำกัดมาก มีเพียงสิ่งเดียวที่คุณทำได้ นั่นคือการทำให้ข้อความเปิดเผย เปิดโดยค่าเริ่มต้น.

ในการเริ่มหีบเพลงในสถานะเปิด ให้เพิ่มบูลีน เปิด แอตทริบิวต์ แท็ก:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

อ่านเพิ่มเติม

นี่คือหีบเพลง HTML5 ดั้งเดิมเพื่อซ่อนและเปิดเผยเนื้อหา สวยเย็นใช่มั้ย?

ฉันสามารถใช้แอตทริบิวต์ใดได้บ้าง

แอตทริบิวต์ด้านล่างสามารถใช้สำหรับ แท็ก:

คุณลักษณะ	ความคุ้มค่า	สรุป
เปิด	เปิด	ค่าเริ่มต้นคือ ไม่เปิด.
id	ความคุ้มค่า	ระบุตัวระบุที่ไม่ซ้ำ
ชั้น	ชื่อชั้น	กำหนดชื่อคลาสให้กับองค์ประกอบ
สไตล์	ค่า CSS	กำหนดสไตล์ CSS ให้กับองค์ประกอบ

แล้วมีข้อจำกัดอะไรบ้าง? มีเสมอจับใช่มั้ย?

ไม่รองรับ Internet Explorer

หีบเพลงที่ใช้ HTML5 เท่านั้นนี้ใช้ไม่ได้กับ Internet Explorer เวอร์ชันใดๆ หากคุณต้องรองรับ IE11 คุณจะต้องใช้โซลูชันทางเลือกอื่นโดยใช้ JQuery รองรับเบราว์เซอร์อื่นๆ ทั้งหมด และ .

ไม่มีแอนิเมชั่นหรือทรานซิชั่นที่ปรับแต่งเอง

แม้ว่าคุณจะสามารถแก้ไขและจัดรูปแบบลักษณะที่ปรากฏ (ดังที่แสดงไว้ด้านบน) คุณจะไม่สามารถทำให้ข้อความแสดงภาพเคลื่อนไหวหรือการเปลี่ยนผ่านได้ หากคุณต้องการทำเช่นนั้น คุณต้องมีโซลูชันหีบเพลง CSS/JSS อื่น

โปรแกรมอ่านหน้าจอและการช่วยสำหรับการเข้าถึง

นี่คือพื้นเมือง HTML5 และมัน *ควรจะ* เข้าถึงได้ แต่พบว่าข้อความที่เปิดเผยจริงไม่ได้ประกาศอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอเสมอไป

อ้างอิง:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
• https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
• https://caniuse.com/details
• https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/