人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://www.pat.hi-ho.ne.jp/oka_tosho/doc_oritatmi.htm
のような折り畳みをテキストコンテンツではなく
表で行いたいと思っています。

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

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

●質問者: s985758
●カテゴリ:インターネット ウェブ制作
✍キーワード:にの ウィンドウ エラー クリック コンテンツ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GEN111
●60ポイント

表(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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ