この下がありません。
display:noneで表示されない状態です。

前回の質問を応用させた質問をします。
前回の質問で、htmlの一部をdisplay:noneにして、クリック時のみ表示する方法を学びましたが、

html
1<html>
2<head>
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
4</head>
5<body>
6<script>
7    $(function(){
8        $(".section_trigger_1").on("click",function(){
9            $(".section_box").hide();
10            $(".section_box_1").show();
11        })
12        $(".section_trigger_2").on("click",function(){
13            $(".section_box").hide();
14            $(".section_box_2").show();
15        })
16        $(".section_trigger_3").on("click",function(){
17            $(".section_box").hide();
18            $(".section_box_3").show();
19        })
20        $(".section_trigger_all").on("click",function(){
21            $(".section_box").show();
22        })
23        $(".section_trigger_hide").on("click",function(){
24            $(".section_box").hide();
25        })
26    })
27</script>
28<style>
29.section_box{
30    display:none;
31}
32</style>
33<h3 id="menu">メニュー</h3>
34<ul>
35    <li class="section_trigger_1">セクション1</li>
36    <li class="section_trigger_2">セクション2</li>
37    <li class="section_trigger_3">セクション3</li>
38    <li class="section_trigger_all">全部表示させるよ</li>
39    <li class="section_trigger_hide">全部隠すよ</li>
40</ul>
41<div class="section_box_1 section_box">
42    <h3>セクション1</h3>
43    <p>セクション1の段落。 ...</p>
44</div>
45<div class="section_box_2 section_box">
46    <h3>セクション2</h3>
47    <p>セクション2の段落。 ...</p>
48</div>
49<div class="section_box_3 section_box">
50    <h3>セクション3</h3>
51    <p>セクション3の段落。 ...</p>
52</div>
53</body>
54</html>
55

これを応用したhtmlを作成したいです。
以下が僕が応用したコードですが、これだとdisplay:noneで囲った部分がdisplay:noneになりますが、クリックしても表示されません。

参考したコードがjavascriptのため、phpのコードに入れるには何を細くするべきですか？
※javascriptのコードをphpのコードを入れるにはEOFを使うことを知っていますが、EOFを使ってみても変わりません。

php
1<head>
2<script>
3function panelChange(panel){
4    var check_panel;
5    check_panel = document.forms["form_menu"].elements[panel].checked;
6    if(check_panel){
7        document.getElementById(panel+"_table").style.display="block";;
8    }else{
9        document.getElementById(panel+"_table").style.display="none";;
10    }
11}
12
13</script>
14</head>
15

を<head></haed>に入れ、htmlを

echo '<input type="checkbox" id="Panel1" onclick="panelChange(this.id);">';
echo '<table class="menu" width=100>';
echo '<caption class="class">';
echo '<label for="Panel1">';
echo $r->name;
echo '</label>';
echo '</caption>';
echo '</td>';
echo '</tr>';
echo '<tbody class="panel_table" id="Panel1_table">';
echo '<tr>';
echo '<th>';
echo 'アクセス';
echo '</th>';
echo '<td>';
echo $r->access;
echo '</td>';
echo '</tr>';
echo '</tbody>';
echo '</table>';
echo '</form>';
echo '</table>';

にしました。
アクセスをdisplay:noneにしてクリック時に表示したいです。

※全体のコードを提示します。
echo '<td>'
echo $r->access以下を非表示表示にしたいです。


<?php
$key='私のkey';
$count='10';
$large_area='〇〇';
$start ='2';
$format='xml';
$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format;
$xml=simplexml_load_file($url);
if(!$xml->test){
			echo '見つかりませんでした';
		} else { 
			foreach($xml->test as $r){	    
echo '<table>' ;
   echo '<tr>';
   echo '<td>';
   echo $r->name;
   echo '</td>';
    echo '<td>';
   echo $r->access;
   echo '</td>';
    echo '</tr>';
   	echo '</table>';
   	}
   	   	}
   	
   		?>

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

回答1件

ベストアンサー

今回の命題であればPHPで書かないほうがわかりやすいので
HTMLだけで書き直してください
不要なtdやtrの閉じタグもありHTML自体を正しく書くところから始めてください

なおご要望としてはキャプションをクリックしてtbodyを表示・非表示すればいいのでしょうか？

追記

チェックボックスに保持していいのでしたらidを指定してつけたり消したりしなくてもよいのでは？

javascript
1$(function(){
2  $('.Panel').each(function(){
3    if($(this).prop('checked')) $(this).nextAll('table.menu').first().find('tbody').hide();
4  });
5  $('.Panel').on('change',function(){
6    $(this).nextAll('table.menu').first().find('tbody').toggle();
7  });
8});

HTML
1<input type="checkbox" id="Panel1" class="Panel">
2<table class="menu" width=300>
3<caption>
4<label for="Panel1">
5test caption 1
6</label>
7</caption>
8<tbody>
9<tr>
10<th>
11アクセス
12</th>
13<td>
14test access 1
15</td>
16</tr>
17</tbody>
18</table>
19<input type="checkbox" id="Panel2" class="Panel" checked>
20<table class="menu" width=300>
21<caption>
22<label for="Panel2">
23test caption 2
24</label>
25</caption>
26<tbody>
27<tr>
28<th>
29アクセス
30</th>
31<td>
32test access 2
33</td>
34</tr>
35</tbody>
36</table>
37

チェックボックス自体はcssで非表示にして構いません

css

以前書いたのはCSS版

CSS
1input.Panel{display:none;}
2input.Panel:checked + table > tbody {display:none;}

HTML
1<input type="checkbox" id="Panel1" class="Panel">
2<table class="menu" width=300>
3<caption>
4<label for="Panel1">
5test caption 1
6</label>
7</caption>
8<tbody>
9<tr>
10<th>
11アクセス
12</th>
13<td>
14test access 1
15</td>
16</tr>
17</tbody>
18</table>
19<input type="checkbox" id="Panel2" class="Panel" checked>
20<table class="menu" width=300>
21<caption>
22<label for="Panel2">
23test caption 2
24</label>
25</caption>
26<tbody>
27<tr>
28<th>
29アクセス
30</th>
31<td>
32test access 2
33</td>
34</tr>
35</tbody>
36</table>

単純なクリックによる表示・非表示

menuクラスのついたtableのcaptionをクリックする度にtbodyを切り替えるだけでいいなら
こうしてください

javascript
1$(function(){
2  $('table.menu caption').on('click',function(){
3    $(this).nextAll('tbody').first().toggle();
4  });
5});

HTML
1<table class="menu" width=300>
2<caption>
3test caption 1
4</caption>
5<tbody>
6<tr>
7<th>
8アクセス
9</th>
10<td>
11test access 1
12</td>
13</tr>
14</tbody>
15</table>
16<table class="menu" width=300>
17<caption>
18test caption 2
19</caption>
20<tbody style="display:none">
21<tr>
22<th>
23アクセス
24</th>
25<td>
26test access 2
27</td>
28</tr>
29</tbody>
30</table>

投稿2016/09/26 06:30

編集2016/09/28 08:10

yambejp

総合スコア114810

yambejp

2016/09/26 10:38

とりあえずcaptionでチェックボックス経由のtbodyを表示・非表示する方法を追記しておきます

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

追記

css

単純なクリックによる表示・非表示

関連した質問