Softonic

ตัวสร้าง CSS Accordion

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

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

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

สร้างแอคคอร์เดียน 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

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

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

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

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

ตัวสร้างลูกศร CSS

สร้างลูกศร CSS ในเบราว์เซอร์ด้วยทิศทาง สี ขนาด และความหนาของเส้นขอบ แล้วคัดลอกกฎ.

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

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือนี้มีให้บริการในภาษาอื่น