ในบทนี้จะเป็นการแนะนำการใช้งาน Page Bulider ในส่วนของ Accordion หรือตัวแสดงข้อมูลแบบแยกหัวข้อ
ในการใช้งาน Accordion นั้น เราจำเป็นต้องเตรียมข้อมูล ทั้งในส่วนหัวข้อ และส่วนรายละเอียด อาทิเช่น เราต้องการทำเป็นในส่วน ถาม-ตอบ เราก็ต้องมีคำถาม และคำตอบไว้แล้ว โดยเราสามารถใช้งานได้เพียงแค่ลาก Accordion มาไว้ใน Row หรือ Colume ที่เราเตรียมไว้ ดังรูปที่.1
รูปที่.1
โดยเริ่มต้น ระบบจะเตรียมข้อมูลตัวอย่างให้แล้ว 4 รายการ โดยแยกเป็น Section หากเราต้องการแก้ไข ก็ให้นำ Mouse ไปวางที่ Accordion ให้ขึ้นเป็นกรอบสีส้ม แล้วเลือกที่เมนู Edit the item ก็จะเกิดเป็นเมนูให้เราแก้ไข ดังรูปที่.2
รูปที่.2
1.Accordion edition
เป็นการแก้ไขในส่วน Section ของข้อมูล โดยให้เราสามารถแก้ไขชื่อ และรายละเอียดเพิ่มเติม รวมถึงสามารถสร้าง Section เพิ่มเติมได้ ดังรูปที่.3
รูปที่.3
2.Heading style
เป็นการกำหนดรูปแบบของใส่วนหัวข้อ ทั้งในส่วน สีพื้นหลัง ตัวอักษร หรือกรอบต่างๆ ดังรูปที่.4
รูปที่.4
3.Active heading style
เป็นการกำหนดคล้ายๆกับข้อที่ 2 แต่จะเป็นในส่วนของ Section ที่ถูกเลือกดูข้อมูลอยู่ในขณะนั้น ดังรูปที่.5
รูปที่.5
4.Content style
เป็นการกำหนดเหมือนข้อที่ 2 แต่จะเป็นในส่วนเนื้อหา หรือคำอธิบายของ Section นั้นๆ ดังรูปที่.6
รูปที่.6
ดังนั้นการใช้งาน Accordion จึงเป็นการแสดงข้อมูลที่สร้างรูปแบบของเนื้อหา ที่มีความแตกต่าง และน่าดูมากยิ่งขึ้นนั้นเอง