> For the complete documentation index, see [llms.txt](https://helpv3.ladipage.vn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpv3.ladipage.vn/cac-phan-t-co-ban-tren-landingpage/phan-tu/accordion.md).

# Accordion

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.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FIMhcNKyu0X00G7MhyT4I%2Facc.png?alt=media&amp;token=b9a8b31e-221b-4385-b15b-f7964eadd48f" alt=""><figcaption></figcaption></figure>

Hoặc bạn vào Thêm mới--> Phần tử--> Accordion.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FRZruzbdL5nrJmUB4Xe33%2Facc1.png?alt=media&amp;token=dc16c8d2-aaf8-468d-a8d5-d7517681d861" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FPsBJa0BJG6W3cWwKpRbk%2Facc2.png?alt=media&amp;token=dda94400-150b-4407-af0c-72be3ef3648a" alt=""><figcaption></figcaption></figure>

1. **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](https://help.ladipage.vn/cac-phan-t-co-ban-tren-landingpage/phan-tu/tieu-de-doan-van-danh-sach).

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2F8lpLj1CSRBiUUVon8Hph%2FAcc3.png?alt=media&amp;token=8ecdbdfc-f3a2-4f26-b787-8b8fddcbe980" alt=""><figcaption></figcaption></figure>

* 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:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FOu5g6QvLeuzz7AqjmdqX%2Facc4.png?alt=media&amp;token=39f2192a-d799-45d5-b400-0df5fa6c3ab2" alt=""><figcaption></figcaption></figure>

* 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.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FnwDFTulNyTH2efYq3t6E%2Facc5.png?alt=media&amp;token=778805ef-a8d4-4383-8aac-b1cb68c21639" alt=""><figcaption></figcaption></figure>

2\. **Accordion\_Content:**

Bạn thiết lập/thay đổi nội dung cho văn bản như sau:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FKX7SJMusLDnNauRKwypV%2Fcontent1.png?alt=media&amp;token=2482b318-5e30-49e1-9892-5b7b25ec55c6" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FmGLvu8av3NTLZ3tXtnMe%2Fcontent3.png?alt=media&amp;token=8e6d6f86-eab1-4ddc-9e8f-41bffac77a00" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FmQhR4CT7IFsSJ2icmlJZ%2Fcontent4.png?alt=media&amp;token=0193606a-be8b-4e72-a3d7-b2d0b40d8a98" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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.
{% endhint %}

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FnyvCOs5FCaUldqMYf10v%2Facc6.png?alt=media&amp;token=f4a58774-e197-4db5-b5ff-04574e32d60d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2Fxx50fmf8wyAYQKFi2m7U%2Facc8.png?alt=media&amp;token=1fbe5e4f-10f8-420b-a6e6-fa5f1d94c7d2" alt=""><figcaption></figcaption></figure>

Để 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.

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FpQFDCuniWxOgygmHQGDz%2Facc7.png?alt=media&amp;token=ab30b2c4-e97d-4bf1-981c-0db0a06f14bc" alt=""><figcaption></figcaption></figure>