テーブルをボタン押下で表示非表示したい。

あるサイトを参考にし、項目の表示非表示を実装進めています。

<style>	
 
/*中身を非表示にしておく*/
.hidden_box_check .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
 
/*クリックで中身表示*/
.hidden_box_check input.targeted:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
	
</style>
<div class="hidden_box_check">
	<input type="checkbox" id="label1" class="targeted"/>
	<label for="label1">クリックして表示(targeted)</label>
 
	<input type="checkbox" id="label2"/>
	<label for="label2">クリックして表示(non targeted)</label>
 
	<!--間に入ってても親(hidden_boxがきくCSSセレクタ)-->
	<div class=""></div>
	<div class=""></div>
	<div class="hidden_show">
	<!--非表示ここから-->
		<p><img src="画像"></p>
		<!--ここまで-->
	</div>
</div>

テーブルの中にこのコードをかき、ボタンを押したらthからtrやtbも表示するようにしたいです。

しかし、<div class="hidden_show">
の中に書いてもボタン押す前にth等が表示された状態になってしまいズレてしまいます。

この中にどう書けばthも表示非表示の対象に入れれますか？

yambejp

2020/09/07 04:00

> ボタンを押したらthからtrやtbも表示そのようなソースが提示されていないので回答ができません

m.ts10806

2020/09/07 04:05

CakePHPやPHPとの関連性は何でしょうか。

退会済みユーザー

2020/09/07 04:07

提示している >しかし、<div class="hidden_show"> の下に書けばいいんですが… <div class="hidden_show"> <th>あいうえお</th> <tb>input等ほかの処理<tb> こんな感じですかね。書く場所が違うんですかね？なんかtbはうまく消えてくれるんですが、thだけ既に表示された状態になります。なにかthだけ強制表示させるようなcssが必要ですか？

yambejp

2020/09/07 04:24

thの使い方がおかしいです。理解が浅いなら全部divとかにまとめたほうがよいのでは？

m.ts10806

2020/09/07 04:24

そもそもtbタグなんてHTMLにはないですし、 tdだったとしてもthもtdもdivの子にはなれませんよ。正しいHTMLを作れないとCSSもJavaScriptもまともに動きません。

行動規範の内容に同意します

回答2件

ベストアンサー

ご希望のことは下記のようなことでしょうか。

Codepenサンプル

html
1<input type="checkbox" id="label1" class="targeted" />
2<table>
3  <tr>
4    <th colspan="2" class="btn">
5      <label for="label1">クリックして表示(targeted)</label>
6    </th>
7  </tr>
8  <tr class="hidden_show">
9    <th>
10      項目1
11    </th>
12    <th>
13      項目2
14    </th>
15  </tr>
16  <tr class="hidden_show">
17    <td>
18      データ1
19    </td>
20    <td>
21      データ2
22    </td>
23  </tr>
24</table>
25<p><a href="https://teratail.com/questions/290128">PHP - テーブルをボタン押下で表示非表示したい。｜teratail</a></p.

css
1table {
2  width: 300px;
3  border: 1px solid gray;
4}
5th, td {
6  border: 1px solid gray;
7}
8
9th.btn {
10  border: none;
11  background-color: lightgray;
12}
13input.targeted {
14  display: none;
15}
16
17/*中身を非表示にしておく*/
18tr.hidden_show > * {
19    height: 0;
20    padding: 0;
21    overflow: hidden;
22    opacity: 0;
23    transition: 0.8s;
24    line-height: 0;
25}
26
27/*クリックで中身表示*/
28input.targeted:checked + table tr.hidden_show > * {
29    padding: 10px 0;
30    height: auto;
31    opacity: 1;
32    line-height: 1;
33}