Softonic

ตัวสร้าง CSS Accordion

ขั้นตอน 1 / 4 เนื้อหา

เนื้อหาแอคคอร์เดียน

กรอกหัวข้อและเนื้อหาแผงเป็นข้อความธรรมดา ข้อความที่ดูเหมือน HTML จะถูก escape ในโค้ดที่สร้างขึ้น

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

สร้างแอคคอร์เดียน 3 ส่วนด้วยองค์ประกอบ <details> และ <summary> ที่มีความหมาย แก้ไขหัวข้อและเนื้อหาแบบข้อความธรรมดา เลือกสี ระยะห่าง และวิธีเปิด ทดลองในตัวอย่าง แล้วคัดลอกโค้ดหรือดาวน์โหลดไฟล์ HTML แบบใช้เดี่ยว ทุกอย่างทำงานในแท็บเบราว์เซอร์นี้

วิธีสร้าง CSS Accordion

  1. 1

    เขียนสามส่วน

    ใส่หัวข้อสั้นและข้อความแผงในแต่ละส่วน ข้อความที่คล้าย HTML จะถูก escape แทนการทำงาน

  2. 2

    กำหนดการออกแบบ

    เลือกสีหกหลัก 4 สี ความโค้งมุม 0 ถึง 24 px และระยะห่างด้านใน 8 ถึง 32 px

  3. 3

    เลือกวิธีเปิด

    เปิดหลายแผงค้างไว้ หรือใช้แอตทริบิวต์ name มาตรฐานเพื่อเปิดทีละแผง แล้วเลือกลูกศรหรือเครื่องหมายบวกและลบ

  4. 4

    ทดสอบและส่งออก

    ลองตัวอย่างด้วยตัวชี้และแป้นพิมพ์ แล้วคัดลอกโค้ดหรือดาวน์โหลดไฟล์ HTML แบบ UTF-8

โค้ดที่สร้างขึ้น

แต่ละส่วนใช้องค์ประกอบเปิดปิดมาตรฐานของเบราว์เซอร์:

<details class="generated-accordion" open>
  <summary>มีอะไรอยู่บ้าง</summary>
  <div class="generated-accordion__panel">ใส่รายละเอียดไว้ที่นี่</div>
</details>

CSS ที่สร้างขึ้นกำหนดเส้นขอบ พื้นหลังหัวข้อ ข้อความ โฟกัส ระยะห่าง มุม และไอคอน โดยใช้คุณสมบัติแบบ logical เช่น margin-inline-start และมีกฎสำหรับการวางจากขวาไปซ้าย ส่วน media query prefers-reduced-motion จะปิดการเปลี่ยนไอคอนเมื่อผู้ใช้เลือกให้ลดการเคลื่อนไหว

เปิดหลายแผงหรือแผงเดียว

การตั้งค่า มาร์กอัปที่สร้าง ผลลัพธ์
หลายแผง ไม่มี name ร่วม แต่ละส่วนเปิดปิดแยกกัน
แผงเดียว ทุกส่วนใช้ name="generated-accordion" เบราว์เซอร์ที่รองรับจะปิดแผงอื่นเมื่อเปิดแผงใหม่

เบราว์เซอร์เก่าที่ไม่รองรับกลุ่ม details แบบเปิดทีละแผงยังใช้งานได้ แต่อาจเปิดหลายแผงพร้อมกัน

ข้อความธรรมดาที่ปลอดภัย

หัวข้อและแผงจะถูกมองเป็นข้อความ อักขระ <, >, &, เครื่องหมายคำพูด และอะพอสทรอฟีจะถูก escape ในโค้ด จึงแสดงแท็กที่วางเป็นข้อความแทนการทำงาน หากต้องการลิงก์หรือรายการ ให้เพิ่มมาร์กอัปที่ตรวจสอบแล้วหลังส่งออก

ตรวจสอบการเข้าถึงก่อนเผยแพร่

  • ใช้ Tab ไปยัง summary แต่ละรายการ แล้วทดสอบ Enter และ Space
  • ตรวจสอบคอนทราสต์ของสีโฟกัสกับพื้นหลังหัวข้อและหน้า
  • ทดสอบการซูม หน้าจอแคบ และหน้าแบบขวาไปซ้าย
  • อย่าซ่อนคำแนะนำหลักของหน้าไว้เฉพาะในแผงที่ปิด

คำถามที่พบบ่อย

ไม่ต้อง การเปิดปิดใช้พฤติกรรมมาตรฐานของ <details> และ <summary> ไฟล์ที่ดาวน์โหลดมีเฉพาะ HTML และ CSS

ได้ เลือกโหมดแผงเดียว แล้ว <details> ทั้งสามจะใช้แอตทริบิวต์ name เดียวกัน เบราว์เซอร์เก่าจะกลับไปเปิดปิดแยกกัน

ตัวแก้ไขตั้งใจรับข้อมูลเป็นข้อความธรรมดาและ escape อักขระ HTML หากจำเป็น ให้เพิ่มมาร์กอัปที่ตรวจสอบแล้วหลังส่งออก

ไม่ถูกอัปโหลด ข้อความ การตั้งค่า ตัวอย่าง การคัดลอก และการดาวน์โหลดอยู่ในเบราว์เซอร์ ระหว่างหน้า สถานะชั่วคราวจะอยู่ใน sessionStorage ของแท็บปัจจุบันและไม่อยู่ใน URL

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS

เลขฐานสองเป็นฐานสิบ

แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร

ตัวแปลง BBCode เป็น HTML

แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง

เครื่องกำเนิดจานสี

สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน