การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Collapse

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

วิธีการใช้งาน Collapse เบื้องต้น

ในการใช้งาน Collapse ด้วย Bootstrap 5 เราจำเป็นต้องใช้โครงสร้าง HTML ที่กำหนดไว้อย่างถูกต้อง และใช้งานร่วมกับ JavaScript ของ Bootstrap ที่ทำให้เนื้อหาสามารถเปิดและปิดได้ตามที่เราต้องการ

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Collapse Example</title>
    <!-- ลิงก์ไปยังไฟล์ CSS ของ Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>ตัวอย่างการใช้งาน Collapse</h2>

        <!-- ปุ่มที่ใช้เปิด/ปิด Collapse -->
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            คลิกเพื่อเปิด/ปิดเนื้อหา
        </button>

        <!-- ส่วนเนื้อหาที่จะถูกแสดงหรือซ่อน -->
        <div class="collapse" id="collapseExample">
            <div class="card card-body mt-3">
                นี่คือเนื้อหาที่สามารถเปิด/ปิดได้โดยใช้คอมโพเนนต์ Collapse ของ Bootstrap 5
            </div>
        </div>
    </div>

    <!-- ลิงก์ไปยังไฟล์ JS ของ Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ปุ่มเปิด/ปิด (Toggle Button)

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    คลิกเพื่อเปิด/ปิดเนื้อหา
</button>

ปุ่มนี้เป็นตัวควบคุมการเปิดหรือปิดของเนื้อหาที่ถูกซ่อนอยู่ โดยใช้ data-bs-toggle="collapse" ซึ่งจะทำให้ปุ่มทำงานร่วมกับคอมโพเนนต์ Collapse ของ Bootstrap 5 และเราต้องระบุว่าเนื้อหาที่ต้องการเปิด/ปิดคืออะไรโดยใช้ data-bs-target ที่ชี้ไปยัง id ของส่วนเนื้อหาที่เราต้องการเปิด/ปิด

ส่วนเนื้อหาที่ถูกซ่อน/แสดง

<div class="collapse" id="collapseExample">
    <div class="card card-body mt-3">
        นี่คือเนื้อหาที่สามารถเปิด/ปิดได้โดยใช้คอมโพเนนต์ Collapse ของ Bootstrap 5
    </div>
</div>

ส่วนนี้คือเนื้อหาที่จะถูกซ่อนและแสดงขึ้นเมื่อผู้ใช้กดปุ่ม โดยใช้คลาส .collapse เพื่อบอกว่าเป็นส่วนที่สามารถถูกเปิดหรือปิดได้

ตัวอย่างการใช้งานขั้นสูง

Bootstrap 5 ยังรองรับการใช้งาน Collapse ในหลาย ๆ กรณี เช่น การเปิด/ปิดหลายคอมโพเนนต์พร้อมกัน หรือการเปิด/ปิดข้อมูลแบบ accordion ที่เปิดได้ทีละหนึ่งเท่านั้น

ตัวอย่าง Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        หัวข้อที่ 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        เนื้อหาสำหรับหัวข้อที่ 1.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        หัวข้อที่ 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        เนื้อหาสำหรับหัวข้อที่ 2.
      </div>
    </div>
  </div>
</div>

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

สรุป

คอมโพเนนต์ Collapse ใน Bootstrap 5 เป็นเครื่องมือที่สะดวกและง่ายต่อการใช้งานในการสร้างส่วนเนื้อหาที่สามารถเปิด/ปิดได้ ช่วยให้เราสามารถจัดการกับข้อมูลที่ต้องการซ่อนเพื่อให้หน้าเว็บไม่ดูรกจนเกินไป

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ