Share Tạo accordion với thư viện Experiment Accordion

[filiallion]

Language

Tiếng Việt

Hiện nay các thư viện như Bootstrap hay UIkit đều có tích hợp thành phần accordion giúp các bạn tạo accordion một cách nhanh chóng. Tuy nhiên, đôi lúc các bạn chỉ muốn sử dụng riêng thành phần accordion thì các bạn có thể sử dụng thư viện Experiment Accordion thay vì tích hợp cả gói thư viện với nhiều thành phần không dùng tới.

Các bạn tải thư viện Experiment Accordion tại địa chỉ https://github.com/fofr/paulrhayes.com-experiments/tree/master/accordion và có thể xem trước ví dụ tại địa chỉ https://paulrhayes.com/experiments/accordion.

Các bạn tích hợp thư viện Experiment Accordion vào website với dòng mã lệnh như sau:

<link href="path/to/experiment.css" rel="stylesheet">

Và tạo accordion với nội dung mã lệnh như mẫu sau:

<div class="accordion">
    <div id="one" class="section">
        <h1>
            <a href="#one">Title 1</a>
        </h1>
        <div>Content 1</div>
    </div>
    <div id="two" class="section">
        <h1>
            <a href="#two">Title 2</a>
        </h1>
        <div>Content 2</div>
    </div>
    <div id="three" class="section">
        <h1>
            <a href="#three">Title 3</a>
        </h1>
        <div>Content 3</div>
    </div>
</div>