Một số mẫu Accordion (collapsible section) thu gọn/mở rộng nội dung

Để tạo hiệu ứng thu gọn/mở rộng (Accordion) mà không cần dùng đến Javascript phức tạp, cách đơn giản và nhẹ nhất là sử dụng cặp thẻ HTML5 có sẵn: <details> và <summary>.

Dưới đây là mã HTML sẵn sàng để bạn dán vào tab Code của WordPress:

MÃ

<div class="accordion-container" style="max-width: 800px; margin: auto;">

    <details style="background: #ffffff; border: 1px solid #e0e0e0; padding: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
        <summary style="font-weight: bold; cursor: pointer; color: #0ba300; outline: none;">
            Click để xem nội dung bài học 1
        </summary>
        <div style="margin-top: 10px; padding: 10px; border-top: 1px solid #eee;">
            <div>-[speak lang="zh-CN"]<span style="font-size: 14pt; color: #b000d1;">早上好</span>[/speak]</div>
            <div><em><span style="color: #0ba300;">Zǎoshang hǎo</span></em></div>
            <div>Chào buổi sáng.</div>
        </div>
    </details>

    <details style="background: #ffffff; border: 1px solid #e0e0e0; padding: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
        <summary style="font-weight: bold; cursor: pointer; color: #0ba300; outline: none;">
            Click để xem nội dung bài học 2
        </summary>
        <div style="margin-top: 10px; padding: 10px; border-top: 1px solid #eee;">
            <div>-[speak lang="zh-CN"]<span style="font-size: 14pt; color: #b000d1;">下班了吗？</span>[/speak]</div>
            <div><em><span style="color: #0ba300;">Xiàbān le ma?</span></em></div>
            <div>Tan ca rồi hả?</div>
        </div>
    </details>

</div>

Giải thích mã đơn giản này:

• <details>: Là thẻ bao quanh toàn bộ khối thu gọn.

• <summary>: Là phần tiêu đề luôn hiển thị. Khi click vào đây, nội dung bên dưới sẽ hiện ra.

• cursor: pointer: Giúp con trỏ chuột biến thành hình bàn tay khi di chuyển vào tiêu đề, báo hiệu cho người dùng biết có thể click được.

• Ưu điểm: Cực kỳ nhẹ, không làm chậm web và hiển thị tốt trên tất cả các trình duyệt di động hiện nay.

Đoạn mã ngắn nhất chỉ cần dùng hai thẻ chính mà không cần bất kỳ đoạn mã phức tạp nào:

<details>
  <summary>Tiêu đề (Click để mở)</summary>
  Nội dung bên trong sẽ hiện ra khi bạn click.
</details>

Nếu bạn muốn thêm một chút màu sắc cho chuyên nghiệp hơn nhưng vẫn giữ mã cực ngắn:

<details style="cursor: pointer; padding: 10px; border: 1px solid #ddd;">
  <summary style="font-weight: bold; color: #0ba300;">Học tiếng Trung</summary>
  <p>Nội dung chi tiết ở đây...</p>
</details>

7 mẫu trang trí phổ biến và hiệu quả

Dưới đây là 7 mẫu trang trí phổ biến và hiệu quả, từ cơ bản đến nâng cao hơn, sử dụng CSS nội tuyến (inline style) để bạn dễ dàng áp dụng trực tiếp trong trình soạn thảo:

🌟 Mẫu 1: Đơn Giản & Đường Viền (Bordered Style)

🚀 Mẫu 2: Nổi Bật & Màu Sắc (Color Block Style)

⚠️ Mẫu 3: Cảnh báo/Lưu ý (Warning/Note Style)

📘 Mẫu 4: Sách giáo khoa & Hiệu ứng 3D (Textbook/Shadow Style)

🏆 Mẫu 5: Đáp án Chính thức (Official Answer Style)

💖 Mẫu 6: Thẻ Đa Chiều (Material Card Style)

💡 Mẫu 7: Hộp Thông Tin Tối Giản (Minimalist Info Box)

CHI TIẾT CÁC MẪU VÀ MÃ CODE

🌟 Mẫu 1: Đơn Giản & Đường Viền (Bordered Style)

Mẫu này sử dụng đường viền nhẹ nhàng để làm nổi bật khối nội dung và màu nền khác biệt cho tiêu đề.

🎨 Mã Code:

<details style="border: 1px solid #e0e0e0; border-radius: 5px; margin: 15px 0; padding: 0;">
  <summary style="font-weight: bold; padding: 10px 15px; background-color: #f7f7f7; color: #333; cursor: pointer; border-bottom: 1px solid #e0e0e0;">
    ✅ Nhấp vào đây để xem Lời khuyên
  </summary>
  <div style="padding: 15px;">
    <p>Luôn đặt trải nghiệm người dùng lên hàng đầu khi viết bài, đảm bảo thông tin rõ ràng và dễ hiểu.</p>
    <ul>
      <li>Sử dụng tiêu đề phụ hợp lý.</li>
      <li>Tận dụng danh sách liệt kê.</li>
      <li>Giữ đoạn văn ngắn gọn.</li>
    </ul>
  </div>
</details>

Xem mẫu 1

✨ Điểm nổi bật:

• Đường viền (border): Bao quanh toàn bộ khối, giúp tách biệt khỏi nội dung khác.
• Màu nền (background-color): Tiêu đề (summary) có màu nền xám nhạt (#f7f7f7) để dễ nhận thấy hơn.
• Đệm (padding): Đảm bảo không gian thoáng đãng bên trong tiêu đề và nội dung.

🚀 Mẫu 2: Nổi Bật & Màu Sắc (Color Block Style)

Mẫu này sử dụng màu sắc tươi sáng hơn và biểu tượng để thu hút sự chú ý. Thích hợp cho các phần FAQ (Câu hỏi thường gặp) hoặc Thông báo quan trọng.

🎨 Mã Code:

<details style="background-color: #e6f7ff; border-left: 5px solid #007bff; border-radius: 3px; margin: 15px 0;">
  <summary style="font-weight: 600; padding: 12px 15px; color: #0056b3; cursor: pointer;">
    ❓ Câu hỏi thường gặp: Tần suất đăng bài hợp lý?
  </summary>
  <div style="padding: 0 15px 12px 15px;">
    <p>Tần suất đăng bài lý tưởng phụ thuộc vào chủ đề của bạn. Đối với blog, 2-3 bài/tuần thường là mức cân bằng tốt.</p>
    <p><em>(Lưu ý: Chất lượng quan trọng hơn số lượng.)</em></p>
  </div>
</details>

Xem mẫu 2

✨ Điểm nổi bật:

• Viền trái dày (border-left): Tạo dải màu dọc bên trái, giúp khối trông giống như một hộp thông báo.
• Màu nền sáng (background-color: #e6f7ff): Màu xanh nhạt dễ chịu.
• Màu chữ tương phản (color: #0056b3): Màu xanh đậm cho tiêu đề để dễ đọc.

⚠️ Mẫu 3: Cảnh báo/Lưu ý (Warning/Note Style)

⚠️ Mẫu 3: Cảnh báo/Lưu ý (Warning/Note Style)

Mẫu này được thiết kế để nhấn mạnh một thông tin đặc biệt cần lưu ý, sử dụng màu vàng/cam.

🎨 Mã Code:

<details style="border: 2px dashed #ff9800; border-radius: 8px; margin: 20px 0; background-color: #fffbe6;">
  <summary style="font-weight: bold; padding: 10px 15px; color: #e65100; cursor: pointer; display: flex; align-items: center;">
    <span style="margin-right: 10px; font-size: 1.2em;">⚠️</span>
    LƯU Ý QUAN TRỌNG: Quy tắc bảo mật dữ liệu
  </summary>
  <div style="padding: 10px 15px; border-top: 1px dashed #ffb74d;">
    <p>Đảm bảo bạn không bao giờ chia sẻ mật khẩu quản trị viên WordPress của mình với bất kỳ ai. Luôn sử dụng xác thực hai yếu tố (2FA).</p>
  </div>
</details>

Xem mẫu 3

✨ Điểm nổi bật:

• Viền đứt nét (border: 2px dashed): Tạo cảm giác khẩn cấp hoặc cần chú ý đặc biệt.
• Sử dụng <span> và display: flex: Giúp căn chỉnh biểu tượng cảnh báo (⚠️) và văn bản tiêu đề trên cùng một dòng một cách gọn gàng.
• Màu vàng/cam: Màu sắc truyền thống để báo hiệu sự cẩn thận hoặc cảnh báo.

📘 Mẫu 4: Sách giáo khoa & Hiệu ứng 3D (Textbook/Shadow Style)

Mẫu này sử dụng hiệu ứng đổ bóng nhẹ nhàng (box-shadow) để tạo cảm giác như một khối nổi, thích hợp cho các bài học hoặc phần giải thích chi tiết.

🎨 Mã Code:

<details style="border: 1px solid #cce5ff; border-radius: 6px; margin: 20px 0; background-color: #f8ffff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
  <summary style="font-weight: 700; padding: 12px 18px; color: #004085; background-color: #d9edf7; border-bottom: 1px solid #cce5ff; cursor: pointer;">
    📚 [Hán Ngữ] Bấm để xem Giải thích Ngữ pháp
  </summary>
  <div style="padding: 15px 18px;">
    <h4 style="margin-top: 0; color: #004085;">Chủ đề: Cấu trúc "Bất luận... Đều..." (不论... 都...)</h4>
    <p><strong>Giải thích:</strong> Cấu trúc này dùng để diễn đạt ý "dù là... thì cũng...", thường đi với các từ nghi vấn. Đây là một cấu trúc phức tạp trong HSK 4.</p>
    <p><strong>Ví dụ (Ví dụ):</strong> 不论天气如何，我们都应该准时出发。 (Bùlùn tiānqì rúhé, wǒmen dōu yīnggāi zhǔnshí chūfā.)</p>
  </div>
</details>

Xem mẫu 4

✨ Điểm nổi bật:

• Đổ bóng nhẹ (box-shadow): Làm khối nổi bật khỏi nền trang.

• Màu sắc chuyên nghiệp: Sử dụng các tông màu xanh nhạt và xanh đậm, thường thấy trong các tài liệu giáo dục.

• Định dạng bên trong: Sử dụng thẻ <h4> và <strong> để cấu trúc nội dung giải thích bên trong.

🏆 Mẫu 5: Đáp án Chính thức (Official Answer Style)

Mẫu này sử dụng biểu tượng lớn và màu sắc tương phản mạnh để thu hút sự chú ý đến một đáp án cuối cùng. Tuyệt vời cho việc hiển thị các đáp án bài kiểm tra, bài tập tiếng Trung.

🎨 Mã Code:

<details style="margin: 20px 0; background-color: #e6ffed; border: 2px solid #28a745; border-radius: 10px;">
  <summary style="font-weight: bold; padding: 15px 20px; color: #155724; background-color: #d4edda; cursor: pointer; display: flex; align-items: center; border-radius: 8px 8px 0 0;">
    <span style="margin-right: 15px; font-size: 1.5em; color: #28a745;">✓</span>
    [Đáp Án] 请点击查看正确答案 (Qǐng diǎnjī chá kàn zhèngquè dá'àn)
  </summary>
  <div style="padding: 15px 20px;">
    <h3 style="margin-top: 0; color: #28a745;">Chính xác là:</h3>
    <p style="font-size: 1.2em; line-height: 1.5;"><strong>D. 今天我们去看电影。</strong></p>
    <p style="font-style: italic; border-top: 1px solid #c3e6cb; padding-top: 10px;">Giải thích chi tiết: (Nội dung giải thích tiếng Trung/Việt ở đây)</p>
  </div>
</details>

Xem mẫu 5

✨ Điểm nổi bật:

• Màu xanh lá cây: Màu sắc truyền thống đại diện cho sự đúng đắn, thành công.
• Biểu tượng lớn (✓): Nổi bật và dễ nhận biết.
• Kích thước chữ lớn hơn (font-size: 1.2em): Để đáp án chính thức được hiển thị rõ ràng và dễ đọc.
• Tiêu đề được căn chỉnh: Sử dụng display: flex để giữ biểu tượng và văn bản ngang hàng.

💖 Mẫu 6: Thẻ Đa Chiều (Material Card Style)

Mẫu này tập trung vào thiết kế phẳng (flat design), viền bo góc mạnh và sử dụng màu tím (thường đại diện cho sự sáng tạo hoặc cao cấp).

🎨 Mã Code:

<details style="border-radius: 12px; margin: 25px 0; background-color: #ffffff; box-shadow: 0 6px 15px rgba(103, 58, 183, 0.15); overflow: hidden;">
  <summary style="font-weight: 700; padding: 15px 20px; color: #ffffff; background-color: #673ab7; cursor: pointer; display: flex; align-items: center;">
    <span style="margin-right: 15px; font-size: 1.2em;">✨</span>
    [Tổng Kết] Tóm tắt những điểm quan trọng nhất
  </summary>
  <div style="padding: 20px; border-top: 1px solid #ede7f6;">
    <ol style="margin-left: -20px;">
      <li><strong>Điểm 1:</strong> Khả năng tiếp cận (Accessibility) là chìa khóa.</li>
      <li><strong>Điểm 2:</strong> Luôn kiểm tra lại ngữ pháp và chính tả.</li>
      <li><strong>Điểm 3:</strong> Tối ưu hóa hình ảnh trước khi đăng.</li>
    </ol>
    <p style="text-align: right; margin-bottom: 0;"><em>Chúc bạn thành công! (Zhù nín chénggōng!)</em></p>
  </div>
</details>

Xem mẫu 6

<details style="margin: 20px 0; background-color: #f0f4f8; border-radius: 4px; padding: 0 10px;">
  <summary style="font-weight: 600; padding: 15px 10px; color: #334e68; cursor: pointer; border-bottom: 1px solid #d9e2ec; list-style: none;">
    <span style="display: inline-block; margin-right: 10px;">➡️</span>
    Mẹo Nhỏ: Cách chèn Mã Code vào WordPress
  </summary>
  <div style="padding: 10px;">
    <p>Sử dụng các thẻ <code>&lt;pre&gt;</code> và <code>&lt;code&gt;</code> để đảm bảo mã của bạn được hiển thị đúng định dạng mà không bị WordPress xử lý thành HTML.</p>
    <p style="color: #627d98; font-size: 0.9em;"><em>(Gợi ý: Luôn dùng trình soạn thảo Code/Text để dán mã.)</em></p>
  </div>
</details>

xem mẫu 7

✨ Điểm nổi bật:

• list-style: none: Rất quan trọng! Nó loại bỏ biểu tượng mũi tên mặc định của trình duyệt khỏi <summary>, cho phép bạn dùng biểu tượng tùy chỉnh (như ➡️) hoặc đơn giản hóa thiết kế.

• Màu sắc nhã nhặn (#f0f4f8): Tông màu xanh xám nhạt, rất hiện đại và dễ chịu.

• Không có viền ngoài: Chỉ dựa vào màu nền để phân định khối.