下記のコードをもとに、チェックボックスにチェックを入れた時に要素に変化を付ける方法を模索しています。
下記のコードを<table>要素に変えたいのですが、<table>要素に変えると写真のような状態になります。また、<div>部分(変えたバージョンは<table>です)は初期は非表示になっていません。
今回の悩みは「Toggle Button」をクリックすると、
要素が表示/非表示にしたいです。
※<table>要素に変換したバージョンが上記のコードです。
<style> table.ff { border:1px solid #ccc; -webkit-border-radius:4px; -mozborder-radius:4px; border-radius:4px; background:#fcfcfc; padding:20px; } input[type=checkbox]:checked ~table.ff { display:none; } ``` ```html <tr> <td> <label for="toggle"> <input type="checkbox" id="toggle"> Toggle Button </label> </td> </tr> <table class="ff"> <tr> <td> hello </td> </tr> </table> ``` ```css <style> div.changed { border:1px solid #ccc; -webkit-border-radius:4px; -mozborder-radius:4px; border-radius:4px; background:#fcfcfc; padding:20px; } input[type=checkbox]:checked ~ div.changed { display:none; } </style>```css
```html <input type="checkbox" id="toggle"> <label for="toggle">Toggle Button</label> <div class="changed">「Toggle Button」をクリックすると、 要素が表示/非表示になります。</div>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/05 05:10
2016/10/05 05:28
2016/10/05 05:42
2016/10/05 05:43
2016/10/05 06:03
2016/10/05 06:04
2016/10/06 09:23