Input

Coddyの「イメージアコーディオン | フロントエンドプロジェクト」コースのレッスン 16/17。

チャレンジ

簡単

ターゲットの input タグ:

display を none に設定します。

重要: いずれかの input をクリックした後にテキストのトランジションが表示され、クリック後に label が幅を持つようにするために、最後にこのコードを追加してください：

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

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

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>