Đầu vào

Bài học 16 trên 17 trong khóa học Accordion hình ảnh | Dự án front-end của Coddy.

Thử thách

Dễ

Thẻ input mục tiêu:

Đặt display thành none.

Quan trọng: Thêm đoạn code này vào cuối để văn bản chuyển tiếp xuất hiện sau khi nhấp vào bất kỳ input nào, và label sẽ mở rộng theo chiều rộng sau khi nhấp:

input:checked + label {
    width: 600px;
}

input:checked + label .description {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML tại đây -->
        <script src="script.js"></script>
    </body>
</html>