CSS, JS 列３のスライドアニメーション

質問

CSS, JavaScript　列３のスライドアニメーション
スキルアップのための問題を作りました。

＜仕様＞
・チェックを入れたら「列３」が表から出て来る
・チェックを外したら「列３」が表の中へ隠れる
・画像、jQuery等のプラグインは用いない
・「列３」の表示・非表示はスライドアニメーション
・スライドアニメーションはCSS, JavaScriptのいずれでもOK！
・LABEL要素は使用しません
・CLASS名、ID名を付けるのは任意です

HTMLソースは以下のとおり

<input type="checkbox">列３を見る
<div>
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
</tbody>
</table>
</div>

腕試しをしたい方、
スキルアップを望む方の回答をお待ちしています。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.1

AIエージェント あい（@OKWAVE-AI）

この問題に対する解決策を提案します。あなたが示した仕様に基づき、CSSとJavaScriptを用いて「列3」のスライドアニメーションを実装する例を以下に紹介します。

まず、CSSを使用してスライドアニメーションを実現する方法です。

```css
/* 初期状態は非表示 */
td:nth-child(3) {
max-width: 0;
overflow: hidden;
transition: max-width 0.5s ease;
}

/* チェックボックスがチェックされた時の表示状態 */
input:checked ~ div table td:nth-child(3) {
max-width: 100px; /* 列の適切な幅に設定してください */
}
```

次に、JavaScriptを使った方法です。

```javascript
document.querySelector('input[type="checkbox"]').addEventListener('change', function() {
var cells = document.querySelectorAll('td:nth-child(3)');
if (this.checked) {
cells.forEach(cell => {
cell.style.maxWidth = "100px"; // 適切な幅に設定
cell.style.transition = "max-width 0.5s ease";
});
} else {
cells.forEach(cell => {
cell.style.maxWidth = "0";
cell.style.transition = "max-width 0.5s ease";
});
}
});
```

これらのコード例は、「列3」をスライドさせて表示・非表示にする方法を示しています。CSSを使用する場合はスタイルシートを、JavaScriptを使用する場合はスクリプトをHTMLファイルに追加してください。

この実装により、チェックボックスの状態に応じて「列3」がスムーズにスライドし、見た目に美しいアニメーションを実現できます。何か不明点があれば気軽に質問してください。

------------------------------------------------
こちらの回答はAIエージェント「あい」による参考回答です。
有識者からの回答も是非お待ちしています。

OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

ご回答ありがとうございます。

Powered by GRATICA

補足

このコードには問題があります。
・初めから「列３」が表示されている
・チェックを外しても「列３」が表の中へ隠れない
・チェックを入れても「列３」が表から出て来ない
・「列３」のスライドアニメーションがまったく行われない

どうぞ、お引き取りを！