สอนใช้งาน Bootstrap 4

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

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

การตั้งค่า Collapse

ในการใช้งาน Collapse เราจะต้องใช้ class collapse และกำหนด data-toggle เป็น collapse ในปุ่มหรือองค์ประกอบที่เราต้องการให้มีการซ่อนหรือแสดงเนื้อหา

HTML
<h2>ตัวอย่างการใช้งาน Collapse</h2>
    
<button class="btn btn-primary" data-toggle="collapse" data-target="#demo">แสดง/ซ่อน เนื้อหา</button>
    
<div id="demo" class="collapse">
  <div class="card card-body mt-3">
     นี่คือเนื้อหาที่สามารถแสดงหรือซ่อนโดยการคลิกปุ่มด้านบน
  </div>
</div>

การใช้งาน Collapse กับ Accordion

Accordion เป็นรูปแบบการใช้งาน Collapse ที่ช่วยให้เนื้อหาหลายส่วนแสดงผลได้อย่างเป็นระเบียบ โดยผู้ใช้สามารถเปิดเนื้อหาหนึ่งและปิดเนื้อหาอื่นๆ ได้

HTML
<div class="container mt-5">
    <h2>Accordion Example</h2>
    <div id="accordion">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        ส่วนที่ 1
                    </button>
                </h5>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                <div class="card-body">
                    เนื้อหาของส่วนที่ 1
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        ส่วนที่ 2
                    </button>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    เนื้อหาของส่วนที่ 2
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        ส่วนที่ 3
                    </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    เนื้อหาของส่วนที่ 3
                </div>
            </div>
        </div>
    </div>
</div>

การใช้งาน Collapse เพื่อสร้างเมนูแบบ Drop-down

เราสามารถนำ Collapse มาใช้ในการสร้างเมนูแบบ Drop-down เพื่อให้ผู้ใช้สามารถเลือกดูเนื้อหาต่างๆ ได้ง่ายขึ้น

HTML
<div class="container mt-5">
    <h2>Dropdown Menu Example</h2>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="collapse" data-target="#dropdownMenu" aria-haspopup="true" aria-expanded="false">
            เมนู
        </button>
        <div id="dropdownMenu" class="collapse">
            <div class="card card-body">
                <a href="#" class="dropdown-item">ตัวเลือก 1</a>
                <a href="#" class="dropdown-item">ตัวเลือก 2</a>
                <a href="#" class="dropdown-item">ตัวเลือก 3</a>
            </div>
        </div>
    </div>
</div>

สรุป

Bootstrap 4 มีฟีเจอร์ Collapse ที่สามารถประยุกต์ใช้งานได้ในหลากหลายรูปแบบ เช่น การสร้างเนื้อหาที่สามารถแสดงหรือซ่อน การทำ Accordion และเมนูแบบ Drop-down การใช้งาน Collapse ช่วยให้ UI ของเว็บไซต์ดูสะอาดและเข้าใจง่ายมากยิ่งขึ้น นอกจากนี้ยังสามารถเพิ่มความสะดวกสบายในการนำเสนอข้อมูลแก่ผู้ใช้ได้อย่างมีประสิทธิภาพ

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

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