http://www.pat.hi-ho.ne.jp/oka_tosho/doc_oritatmi.htm

のような折り畳みをテキストコンテンツではなく
表で行いたいと思っています。

上記の方法だと表はエラーになってしまうようなので・・・
どなたかご教授おねがいします。

私がしたいことは
表が大きすぎるため、クリックしたときにのみ
画面いっぱいに表示させたいと考えています。
上記の方法以外でも効果的な方法があれば
大歓迎です。
あとできるだけポップアップウィンドウは避けたいと思っています。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/05/19 17:04:52
  • 終了:2007/05/20 03:44:36

回答(1件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/05/19 22:03:04

ポイント60pt

表(table)でも特に問題ないように思いますが……

画面いっぱいというところに問題があるのでしょうか?

次のような感じでお試し下さい。

(サンプルが外側にテーブルを使っていたのでそれに倣いましたが、特に必要ありません。)

<html>
  <head>
    <script type="text/javascript">
      function flip_block(id) {
        document.getElementById(id).style.display = document.getElementById(id).style.display == 'block' ? 'none' : 'block' ;
      }
    </script>

    <style type="text/css">
      table.hidden {
        width : 100% ;
        display : none ;
      }

      p.switch {
        cursor : pointer ;
      }
    </style>
  </head>

  <body>
    <table style="width : 100%">
      <tr>
        <td>
          <p onclick="document.getElementById('t1').style.display = document.getElementById('t1').style.display == 'block' ? 'none' : 'block'" class="switch">ここをクリック (埋め込み型)</p>
          <table id="t1" style="background : yellow ;" class="hidden">
            <tr><td>0</td><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>6</td><td>7</td><td>8</td></tr>
          </table>

          <p onclick="flip_block('t2')" class="switch">ここをクリック (関数呼び出し型)</p>
          <table id="t2" style="background : cyan ;" class="hidden">
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>d</td><td>e</td><td>f</td></tr>
            <tr><td>g</td><td>h</td><td>i</td></tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

サンプルページ   折り畳みコンテンツ 0

id:s985758

ありがとうございました。

全体に広がらないのはTable枠で囲まれてるところが問題だったようです。

上記のスクリプトとても参考になりました。

2007/05/20 03:44:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません