Tạo accordion thu gọn nội dung với Html, Css, Jquery

Accordion là một chức năng rất quan trọng trong website nó giúp chúng hiển thị nội dung một cách tối ưu trên một không gian giới hạn nhằm tăng trải nghiệm người dùng. Trong hôm nay tôi hướng dẫn bạn cách tạo accordion với Html, Css và Jquery.

Hướng dẫn từng bước tạo Accordion bằng Html Css

Đây là một chức năng quan trọng yêu cầu sử dụng linh hoạt html, css và cả jquery kèm thêm cần có tư duy thuật toán tốt.

Vậy nên tôi đã tạo video hướng dẫn chi tiết để bạn dễ theo dõi để nắm chắc vấn đề.

Trong video này tôi sử dụng phần mềm Visual Studio Code, bạn xem hướng dẫn cài đặt VS Code tại đây

Bước 1: Khởi động phần mềm và tạo file accordion.html

Bước 2: Code code html, css, jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>Tạo accordion thu gọn nội dung với Html, Css, Jquery</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrapper {
            max-width: 600px;
            margin: 0px auto;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #e4e4e4;
            padding: 10px 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        
        .accordion-item.active .accordion-header {
            background: #0c81bb;
            color: #fff;
        }
        
        .arrow {
            transition: all 0.3s;
        }
        
        .accordion-item.active .arrow {
            transform: rotate(180deg);
        }
        
        .accordion-body {
            padding: 10px 10px;
            display: none;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('.accordion-item.active .accordion-body').slideDown();
            $('.accordion-header').click(function() {
                $(this).parent().toggleClass('active');
                $(this).parent().children('.accordion-body').slideToggle();
            });
        });
    </script>
    <div id="wrapper">
        <h1>Tạo accordion thu gọn nội dung với Html, Css, Jquery</h1>
        <div class="accordion">
            <div class="accordion-item active">
                <div class="accordion-header">
                    <h3>Tiêu đề 1</h3>
                    <i class="arrow fas fa-chevron-down"></i>
                </div>
                <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id inventore, dolore consectetur esse quae atque illum tempora tempore fugit officiis harum eligendi corrupti praesentium culpa quos et delectus fuga minima debitis voluptas ratione deserunt labore,
                    amet temporibus! Consequatur, eligendi reprehenderit!
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <h3>Tiêu đề 2</h3>
                    <i class="arrow fas fa-chevron-down"></i>
                </div>
                <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id inventore, dolore consectetur esse quae atque illum tempora tempore fugit officiis harum eligendi corrupti praesentium culpa quos et delectus fuga minima debitis voluptas ratione deserunt labore,
                    amet temporibus! Consequatur, eligendi reprehenderit!
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <h3>Tiêu đề 3</h3>
                    <i class="arrow fas fa-chevron-down"></i>
                </div>
                <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id inventore, dolore consectetur esse quae atque illum tempora tempore fugit officiis harum eligendi corrupti praesentium culpa quos et delectus fuga minima debitis voluptas ratione deserunt labore,
                    amet temporibus! Consequatur, eligendi reprehenderit!
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Lưu ý ở trong bài này tôi tạo khối style css và script để code jquery ngay trong file html. Nhìn nó sẽ hơi dài, nếu muốn bạn có thể tạo ra 2 file main.css và app.js để chứa code css và jquery sau đó import vào ở thẻ head.

Nếu bạn muốn học bài bản về html, css, jquery bạn có thể xem thêm chương trình Html Css 21 NgàyLàm chủ jquery siêu tốc. Đây là chương trình tôi trực tiếp xây dựng và đồng hành các bạn đếnkhi ra nghề đi làm kiếm được tiền.

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Gỡ triệt để phần mềm Visual Studio Code

Gỡ triệt để phần mềm VSC 1. Mở thư mục cài đặt VSC C:\Users\Name\AppData\Local\Programs\Microsoft VS CodeClick uninstoo.exe để gỡ phần mềm 2. Xoá thư mục

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x