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

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

ただいまの
回答率

90.51%

  • PHP

    24065questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20426questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11512questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

htmlの一部をdisplay:noneにして、クリック時のみ表示する方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,325

aba623ky

score 55

イメージ説明

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

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

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<script>
    $(function(){
        $(".section_trigger_1").on("click",function(){
            $(".section_box").hide();
            $(".section_box_1").show();
        })
        $(".section_trigger_2").on("click",function(){
            $(".section_box").hide();
            $(".section_box_2").show();
        })
        $(".section_trigger_3").on("click",function(){
            $(".section_box").hide();
            $(".section_box_3").show();
        })
        $(".section_trigger_all").on("click",function(){
            $(".section_box").show();
        })
        $(".section_trigger_hide").on("click",function(){
            $(".section_box").hide();
        })
    })
</script>
<style>
.section_box{
    display:none;
}
</style>
<h3 id="menu">メニュー</h3>
<ul>
    <li class="section_trigger_1">セクション1</li>
    <li class="section_trigger_2">セクション2</li>
    <li class="section_trigger_3">セクション3</li>
    <li class="section_trigger_all">全部表示させるよ</li>
    <li class="section_trigger_hide">全部隠すよ</li>
</ul>
<div class="section_box_1 section_box">
    <h3>セクション1</h3>
    <p>セクション1の段落。 ...</p>
</div>
<div class="section_box_2 section_box">
    <h3>セクション2</h3>
    <p>セクション2の段落。 ...</p>
</div>
<div class="section_box_3 section_box">
    <h3>セクション3</h3>
    <p>セクション3の段落。 ...</p>
</div>
</body>
</html>

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

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

<head>
<script>
function panelChange(panel){
    var check_panel;
    check_panel = document.forms["form_menu"].elements[panel].checked;
    if(check_panel){
        document.getElementById(panel+"_table").style.display="block";;
    }else{
        document.getElementById(panel+"_table").style.display="none";;
    }
}

</script>
</head>


を<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>';
       }
              }

           ?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

 追記

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

$(function(){
  $('.Panel').each(function(){
    if($(this).prop('checked')) $(this).nextAll('table.menu').first().find('tbody').hide();
  });
  $('.Panel').on('change',function(){
    $(this).nextAll('table.menu').first().find('tbody').toggle();
  });
});
<input type="checkbox" id="Panel1" class="Panel">
<table class="menu" width=300>
<caption>
<label for="Panel1">
test caption 1
</label>
</caption>
<tbody>
<tr>
<th>
アクセス
</th>
<td>
test access 1
</td>
</tr>
</tbody>
</table>
<input type="checkbox" id="Panel2" class="Panel" checked>
<table class="menu" width=300>
<caption>
<label for="Panel2">
test caption 2
</label>
</caption>
<tbody>
<tr>
<th>
アクセス
</th>
<td>
test access 2
</td>
</tr>
</tbody>
</table>

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

 css

以前書いたのはCSS版

input.Panel{display:none;}
input.Panel:checked + table > tbody {display:none;}
<input type="checkbox" id="Panel1" class="Panel">
<table class="menu" width=300>
<caption>
<label for="Panel1">
test caption 1
</label>
</caption>
<tbody>
<tr>
<th>
アクセス
</th>
<td>
test access 1
</td>
</tr>
</tbody>
</table>
<input type="checkbox" id="Panel2" class="Panel" checked>
<table class="menu" width=300>
<caption>
<label for="Panel2">
test caption 2
</label>
</caption>
<tbody>
<tr>
<th>
アクセス
</th>
<td>
test access 2
</td>
</tr>
</tbody>
</table>

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

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

$(function(){
  $('table.menu caption').on('click',function(){
    $(this).nextAll('tbody').first().toggle();
  });
});
<table class="menu" width=300>
<caption>
test caption 1
</caption>
<tbody>
<tr>
<th>
アクセス
</th>
<td>
test access 1
</td>
</tr>
</tbody>
</table>
<table class="menu" width=300>
<caption>
test caption 2
</caption>
<tbody style="display:none">
<tr>
<th>
アクセス
</th>
<td>
test access 2
</td>
</tr>
</tbody>
</table>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/26 19:38

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

    キャンセル

  • 2016/09/27 11:23

    これは前回yambejpさんが回答したコードと一緒ですか?

    キャンセル

  • 2016/09/27 11:24

    phpとjavascript、両方を使いたいです。
    また、チェックボックスではなくボタンで実装したいです。

    キャンセル

  • 2016/09/27 12:22

    以前書いたのはCSS版だったかと、追記しておきます

    phpを使いたいとのことですが、おそらくphpで書いているから
    HTMLが破綻しています。
    HTMLが正しくなるようにphpできちんと出力してください

    チェックボックスは値をとっておくための仕様です
    なければないでなんとかなると思いますが、
    デフォルトで表示・非表示を指示できないですが大丈夫ですか?

    キャンセル

  • 2016/09/27 12:26

    最初に書いたjavascriptのコードをphpのファイルに使うにはどうすればいいですか?

    キャンセル

  • 2016/09/27 12:27

    cssでしたか。では、前みたいな一つだけが非表示表示になる事はないんですね。

    キャンセル

  • 2016/09/27 12:28

    破綻して居るとはどこらへんがですか?
    echoを使っているところですか?

    キャンセル

  • 2016/09/27 12:34

    「前みたいな一つだけが非表示表示になる事はない」の意味がわかりませんが
    例示しているCSS版を実行していただければcaptionをクリックすると
    その直後のtbodyの表示、非表示が変更になっていることがわかると思いますが
    サンプルを実行する気はないんでしょうか?

    キャンセル

  • 2016/09/27 12:37

    >破綻して居るとはどこらへんがですか?

    回答の最初にかいてありますよね?
    不要なtdやtrが書かれているし、
    formやtableのへんな閉じタグだけ書かれています

    キャンセル

  • 2016/09/27 13:21 編集

    実行したんですが、一つしか非表示表示になりませんでした。
    僕が提示したコードはapiを取得するコードです。

    キャンセル

  • 2016/09/27 13:28

    css版だと良くないからjavascriptを使えとyambejpさんが回答していたので、javascriptを使おうと思いますが、javascriptのコードをphpに使う場合は何を補足すればいいですか?

    キャンセル

  • 2016/09/27 13:38

    繰り返しになりますHTMLをきちんと例示してください。
    (質問文書のHTMLのソース部分を書き直してください)
    まちがったHTMLをいくら例示されても適用することはできません。

    またPHPからデータを受け継ぐ部分も$r->nameや$->accessは
    こちらでデータが再現できません。

    逆に私の「追記」部分で記載したHTMLでただしいなら、
    そのまま動くはずですが、うごきませんか?

    別途質問のなかでボタンを利用したいとの記載もありましたが
    ボタンを例示しそのボタンをおすとどうしたいのか提示してください

    キャンセル

  • 2016/09/27 13:47

    apiはホットペーパーです。
    全体を表示すればいいですか?

    キャンセル

  • 2016/09/27 13:48

    なら、全体を表示します。
    少々お待ち下さい。
    非表示表示にこだわるのは、その方が見やすいからです。

    キャンセル

  • 2016/09/27 13:49

    質問文に提示します。

    キャンセル

  • 2016/09/27 15:56

    keyとlarge_areaがダミーなので参照できません
    出力されるHTMLを貼り付けてください

    キャンセル

  • 2016/09/28 16:54

    提示します。

    キャンセル

  • 2016/09/28 17:02

    写真は質問文のトップにあります。

    キャンセル

  • 2016/09/28 17:11

    HTMLが書かれていないと意味がないんですが、一応拡大解釈してさらに追記しておきました
    逆に私のソースとどう違うかでもいいのでHTMLとして提示してください

    キャンセル

  • 2016/09/28 17:13

    javascriptをphpファイルにつかうには、javascriptをEOFで囲むのですか?

    キャンセル

  • 2016/09/28 17:19

    やっぱり…、だと思った。

    キャンセル

  • 2016/09/28 17:35

    uverworld101nmさん、自分で質問を立てて下さい。

    キャンセル

  • 2016/09/28 17:37

    すみません。
    勝手に人の質問に入って質問にごめんなさい。
    archiverさん、aba623kyさん、yambejpさん、すみません。

    キャンセル

  • 2016/09/28 17:52

    htmlでしたら、全体を表示します。

    キャンセル

  • 2016/09/29 14:10

    <?php
    echo <<<EOM
    <script type="text/javascript">
    $(function(){
    $('table.menu caption').on('click',function(){
    $(this).nextAll('tbody').first().toggle();
    });
    });
    </script>
    EOM;
    ?>
    と出力しましたが、display:noneのままです。

    キャンセル

  • 2016/09/29 14:14

    jQueryを組み込んでますか?

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js&quot;&gt;&lt;/script&gt;

    の部分をご記載の部分の前に記載します

    キャンセル

  • 2016/09/29 14:25

    質問文に表示します。

    キャンセル

  • 2016/09/29 14:28

    すみません、質問文に載せられないエラーが出てます。
    コメント欄に表示します。

    <?php
    $key='6b6169d454dabd90';
    $count='10';
    $large_area='Z011';
    $start =1;
    $format='xml';
    $url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=&#039;.$key.&#039;&amp;count=&#039;.$count.&#039;&amp;large_area=&#039;.$large_area.&#039;&amp;start=&#039;.$start.&#039;&amp;format=&#039;.$format;
    $xml=simplexml_load_file($url);
    $total_count=$xml->results_available;
    if(!$xml->shop){
    echo '見つかりませんでした';
    } else {
    foreach($xml->shop as $r){
    echo '<table>';
    echo '<tr>';
    echo '<th>';
    echo '店名';
    echo '</th>';
    echo '<td>';
    echo $r->name;
    echo '</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<th>';
    echo '禁煙';
    echo '</th>';
    echo '<td>';
    echo $r->non_smoking;
    echo '</td>';
    echo '</tr>';
    echo '</table>';
    }
    }
    ?>

    キャンセル

  • 2016/09/29 14:29

    また、queryを使ったことがないのですが、使いやすいですか?
    phpでも使えますか?

    キャンセル

同じタグがついた質問を見る

  • PHP

    24065questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20426questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11512questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。