Tính năng Accordion có mục đích sử dụng tương tự như sự kiện Collapse, tuy nhiên thao tác sử dụng sẽ dễ dàng hơn so với sự kiện collapse.
Accordion giúp bạn ẩn và hiển thị 1 nội dung trên trang, giúp người dùng có thể chủ động mở rộng/ẩn nội dung để xem, tiết kiệm không gian hiển thị, thường được dùng cho phần Q&A trên trang landing page.
Để sử dụng Accordion bạn thao tác theo các bước sau:
Bước 1: Tạo khung Accordion.
Bạn vào thanh công cụ nhanh --> chọn Accordion.
Hoặc bạn vào Thêm mới--> Phần tử--> Accordion.
Bước 2: Chỉnh sửa nội dung và thiết lập cho Accordion.
Accordicon sẽ bao gồm Accordicon_Menu và Accordicon_Content.
Accordion_Menu:
Bạn có thể thay đổi nội dung, màu sắc, size, font chữ của văn bản của Accordion_Menu như thiết lập của phần tử Tiêu đề, chi tiết tại đây.
Bạn có thể thay đổi biểu tượng và thiết lập cho biểu tượng của Accordicon_Menu bằng cách bấm vào biểu tượng và thiết lập như trong ảnh:
Bạn có thể thiết lập màu, kích thước, bo góc...của Accordion_Menu tại phần Thiết lập.
2. Accordion_Content:
Bạn thiết lập/thay đổi nội dung cho văn bản như sau:
Bạn có thể thêm các phần tử khác như nút bấm, hình ảnh... tại Accordion_Content để sử dụng.
Khi bạn sử dụng Accordion thì mặc định ở chế độ hiển thị nội dung Accordion_Content. Nếu bạn muốn ẩn, bạn bấm chọn toàn Accordion rồi chọn Ẩn nội dung như hình bên dưới. Bạn muốn chỉnh sửa nội dung Accordicon_Content thì bấm Hiện nội dung lại.
Lưu ý:
Với Collapse thì bạn nên thiết kế theo hàng, không thiết kế nội dung thành các cột. Còn Accordion có thể xếp thành 2-3 cột tùy theo mục đích của bạn.
Để thiết kế nội dung thành các cột, bạn cần tạo nhóm các nội dung từng cột thành nhóm và chọn căn đều dọc.
