Input

Pelajaran 16 dari 17 dalam kursus Akordeon Gambar | Proyek Front-end di Coddy.

Tantangan

Mudah

Tag input target:

Atur display menjadi none.

Penting: Tambahkan kode ini di bagian akhir agar teks transisi muncul setelah kamu mengeklik input apa pun, dan label akan mengambil lebar setelah diklik:

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

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

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>