質問

オンクリックで文字が表示されるタグ【折りたためる】を探しています

質問者：noname#52185
投稿日時：2007/07/07 22:55

オンクリックで文字が表示されるタグは、
文字が見えない段階でも場所をとるので悩んでいます。

オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、
文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー20pt

回答者：may0430
回答日時：2007/07/08 17:16

こんにちは。
※余り詳しくはない者ですが^^;

とりあえず、、、
「visibility='visible'」の部分を「display='block'」
「visibility='hidden'」の部分を「display='none'」
でいけるみたいですよ。

style="position:absolute;" でのサンプルをば。
※↑単独で使用することのない属性になります。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<span onClick="document.all.item('moji2').style.visibility='visible'">
クリックする文字
</span>
<div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;">
この文字をクリックすると消えます
</div>

<br>
てすと
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
※IE7、Sleipnir1.66で動作確認済。
※position指定をすると、全体のレイアウト指定の見直し（レイヤー指定？）が必要になってくると思います。
※「z-index:1」はなくてOKなのですが、値を-1にしてみると違いがわかると思います。
（但し、firefoxは非対応のようです。）

http://www.tohoho-web.com/css/reference.htm#Visual
http://www.htmq.com/style/position.shtml

質問者のみ
この回答にお礼をつける

通報する

No.2

回答者：grumpy_the_dwarf
回答日時：2007/07/08 16:52

visibilityでhiddenしたんじゃ、空間が開くのは当然です。見えないだけで
あるんだから。

見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ
なくてdisplayでnoneにしましょう。ただし、document.all.item()というの
は方言なので、document.getElementById()を使うのがいいですよ。

質問者のみ
この回答にお礼をつける

通報する

No.1ベストアンサー10pt

回答者：fake-tang
回答日時：2007/07/07 23:21

>文字が見えない段階でも場所をとる
隠したほうのタグに style="position:absolute;" を入れてもダメ
でしたか？

どうやって非表示にしているのかわかりませんが、文字列をタグで
んで style="display:none;" とし、Javascrptで none と block を
入れ替えるのでもダメでしたか？

onmouseover ですが、ここで position と visibility をいじるタイプの
折りたたみナビゲーションを利用しています。
http://blog.3d6.moo.jp/

この回答への補足

回答ありがとうございます。
どこに上記のタグを入れれば良いのか教えていただけませんか。
タグは以下の通りです。
<span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'">
クリックする文字
</span>

<div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;">
この文字をクリックすると消えます
</div>