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

補足

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

どうぞ、お引き取りを！