วิธีสร้าง List/Grid View Toggle ด้วย CSS และ JavaScript

List/Grid View Toggle ให้ผู้ใช้เลือกมุมมองข้อมูล: List View (รายการแนวตั้ง) หรือ Grid View (การ์ดแนวนอน) ตัวอย่างนี้ใช้ JavaScript Toggle Class และ CSS Width เพื่อสลับ Layout

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    * { box-sizing: border-box; }
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .column {
      float: left;
      width: 50%;
      padding: 10px;
      color: white;
    }
    .row:after { content: ""; display: table; clear: both; }
    .btn {
      border: none; outline: none; padding: 12px 16px;
      background-color: #f1f1f1; cursor: pointer;
    }
    .btn:hover { background-color: #ddd; }
    .btn.active { background-color: #666; color: white; }
  </style>
</head>
<body>
  <h1>List Grid view example</h1>
  <h2>Click on the below buttons to switch views</h2>
  <div id="btnContainer">
    <button class="btn" onclick="listView()">List</button>
    <button class="btn active" onclick="gridView()">Grid</button>
  </div>
  <br />
  <div class="row">
    <div class="column" style="background-color:rgb(154, 9, 173);"><h2>Column 1</h2></div>
    <div class="column" style="background-color:rgb(113, 35, 216);"><h2>Column 2</h2></div>
  </div>
  <div class="row">
    <div class="column" style="background-color:rgb(19, 143, 85);"><h2>Column 3</h2></div>
    <div class="column" style="background-color:rgb(207, 69, 27);"><h2>Column 4</h2></div>
  </div>
  <script>
    var elements = document.querySelectorAll(".column");
    function listView() {
      Array.from(elements).forEach(item => { item.style.width = "100%"; });
      Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
        if (index === 0) item.classList.add("active");
        else item.classList.remove("active");
      });
    }
    function gridView() {
      Array.from(elements).forEach(item => { item.style.width = "50%"; });
      Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
        if (index === 1) item.classList.add("active");
        else item.classList.remove("active");
      });
    }
  </script>
</body>
</html>

วิธีทำงาน

1. HTML: ปุ่ม 2 ปุ่ม (List, Grid) + Container .row ที่มี .column 4 อัน
2. CSS: .column เริ่มต้น width: 50% (Grid 2 คอลัมน์)
3. JS listView(): ตั้ง width = 100% ทุก .column + Active ปุ่ม List
4. JS gridView(): ตั้ง width = 50% ทุก .column + Active ปุ่ม Grid

Modern Approach: CSS Class Toggle (แยก Logic/Style)

.row { display: flex; flex-wrap: wrap; }
.column { flex: 1 1 45%; min-width: 300px; transition: flex-basis 0.3s; }
.row.list-view .column { flex-basis: 100%; min-width: 100%; }

JavaScript แบบ Cleaner

const container = document.querySelector('.row');
const buttons = document.querySelectorAll('.btn');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const view = btn.dataset.view; // 'list' or 'grid'
    container.classList.toggle('list-view', view === 'list');
    buttons.forEach(b => b.classList.toggle('active', b === btn));
  });
});

HTML แบบ Semantic + Accessible

<div role="group" aria-label="View options">
  <button class="btn" data-view="list" aria-pressed="false">
    <svg aria-hidden="true">...list icon...</svg> List
  </button>
  <button class="btn active" data-view="grid" aria-pressed="true">
    <svg aria-hidden="true">...grid icon...</svg> Grid
  </button>
</div>

Enhancement: Save Preference to localStorage

// On load
const savedView = localStorage.getItem('viewMode') || 'grid';
container.classList.toggle('list-view', savedView === 'list');
updateButtons(savedView);

// On change
function setView(view) {
  container.classList.toggle('list-view', view === 'list');
  localStorage.setItem('viewMode', view);
  updateButtons(view);
}

ใช้กับข้อมูลจริง (Dynamic Data)

<div class="row" id="products">
  <!-- Render ด้วย JS จาก API -->
</div>