のような折り畳みをテキストコンテンツではなく
表で行いたいと思っています。
上記の方法だと表はエラーになってしまうようなので・・・
どなたかご教授おねがいします。
私がしたいことは
表が大きすぎるため、クリックしたときにのみ
画面いっぱいに表示させたいと考えています。
上記の方法以外でも効果的な方法があれば
大歓迎です。
あとできるだけポップアップウィンドウは避けたいと思っています。
No.1
472
58
60pt
表(table)でも特に問題ないように思いますが……
画面いっぱいというところに問題があるのでしょうか?
次のような感じでお試し下さい。
(サンプルが外側にテーブルを使っていたのでそれに倣いましたが、特に必要ありません。)
11
10
<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>
1
1
2
2
1
1
5
ありがとうございました。
全体に広がらないのはTable枠で囲まれてるところが問題だったようです。
上記のスクリプトとても参考になりました。