折りたたみテキスト

0   名前： stage ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
1番目の"読む"というテキストをクリックするとそれに関連した文章が表示されると同時に、"読む"というテキストリンクが非表示になるという仕組みです。また2番目の"読む"というテキストをクリックすると1番目の非表示になっていた"読む"というテキストリンクが再表示されるというふうにしたいんですが思うようにいきません。
お教えいただけますでしょうか。よろしくお願い致します。


<head>


<link href="common/css/import.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript">

//注意！Select Character Code=SJIS.For may Japanese notice.スクリプトを改行しないこと。動作しなくなります。
var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off);
var collapseprevious="yes" //select(yes/no);colosed old content=yes; 複数のコンテンツに＜カクレンヤー＞を使用するときに必要な設定です。あるコンテンツを開くとき、別のコンテンツが既に開いていたら閉じますか？　""のなかを書き換えてください。yesで閉じる、noで開いたまま。(yes/no)

var contractsymbol='<img src="fold_opn.gif">' //コンテンツを開いているときのアイコンまでのパス、または文字記号。テキスト記号を使う場合は <img src="++++">の代わりに使う記号を'+'のように入れるだけ。
var expandsymbol='<img src="fold.gif"> ' //ＭＴ等に使う場合はイメージへのパスに絶対パスを使用してください。
//以下は修正しないほうが無難！

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
for (i=0; i<rootobj.length; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate;

</script>

</head>

<body>

<dl class="kigyou">

<dt>■文章タイトル</dt>

<dt onclick="expandcontent(this, 'sc1')"><a href="#" onClick="this.style.display='none'">読む</a></dt>

<dd id="sc1" class="switchcontent">・企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>

</dl>

<dl class="kigyou">

<dt>■文章タイトル</dt>

<dt onclick="expandcontent(this, 'sc2')"><a href="#" onClick="this.style.display='none'">読む</a></dt>

<dd id="sc2" class="switchcontent">・企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ


</dd>

</dl>

<dl class="kigyou">

<dt>■文章タイトル</dt>

<dt onclick="expandcontent(this, 'sc3')"><a href="#" onClick="this.style.display='none'">読む</a></dt>

<dd id="sc3" class="switchcontent">・企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
企業の「認知度」を上げて、ビジネスチャンスを広げたい！あああああああああああああああああああ
</dd>

</dl>

</body>

</html>
1   名前： 匿名 ： 2007/08/06（月） 18:55  ID:epW2eUw6 sub-8t
せっかくexpandcontentを呼んでいるので、onClick="this.style.display='none'"とはしないで、expandcontentでやってしまいましょう。
function expandcontent(curobj, cid){
    var dt = document.getElementsByTagName('dt');
    for (var i = 0; i < dt.length; i++) {
        dt[i].style.display = 'block';
    }
    curobj.style.display = 'none';
    (以下略)
2   名前： stage ： 2007/08/06（月） 18:55  ID:fmO6fvbC sub-Ds
ありがとうございます。問題が解決いたしました。
本当にありがとうございます。
3   名前： 匿名 ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
mac(safari,opera,firefox)では動作確認okなんですが、windows(IE)ですと最初にページを開いたときに文章も開いたままの状態なんですが。
どの部分を修正すればよろしいでしょうか。
よろしくお願い致します。
4   名前： stage ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
解決いたしました。
5   名前： stage ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
デフォルトで最初に訪れたときに、一番目の文章だけ開いている設定にしたいんですが、方法を教えていただけないでしょうか。
よろしくお願い致します。
6   名前： 匿名 ： 2007/08/06（月） 18:55  ID:epW2eUw6 sub-8t
do_onload() 関数に、if (enablepersist=="on"...
というif文があるのでこれを変更します。
if (enablepersist=="on" && ccollect.length > 0){
    document.cookie = (get_cookie(uniqueidn) == "") ? uniqueidn + "=1" : uniqueidn + "=0" 
    firsttimeload = (get_cookie(uniqueidn) == 1) ? 1 : 0
    if (!firsttimeload)
        revivecontent()
    else
        expandcontent(document.getElementsByTagName('dt')[1], ccollect[0].id);
} else {
     expandcontent(document.getElementsByTagName('dt')[1], ccollect[0].id);
}
7   名前： stage ： 2007/08/06（月） 18:55  ID:VdvLI5ol sub-Ds

ありがとうございます。
試してみたんですが、すべて開きっぱなしになってしまうんですが。
8   名前： 匿名 ： 2007/08/06（月） 18:55  ID:epW2eUw6 sub-8t
少なくともIE、Firefoxでは動いています。
>>0から>>1および>>6以外の変更を加えたのであれば、それを書いてもらわないと何も分かりません。
9   名前： stage ： 2007/08/06（月） 18:55  ID:fmO6fvbC sub-Ds
大変失礼いたしました。問題なく動作いたしました。
あともう一点お聞きしたいんですが。
"読む"をクリックすると下が開き文章が出現します。全部で3つの文章項目があります。ページに最初に訪れると全て閉じた状態になっているんですが、これを一番目の文章だけ始めに訪れた時に開いた状態にしておきたいんですがどうしてもわかりません。アドバイスをお願い致します。

宜しくお願い致します。
10   名前： 匿名 ： 2007/08/06（月） 18:55  ID:D/mQtTzV sub-Ax
単純に考えるなら…次のコードはどうでしょう。
注意事項として、
１：ＩＥでしか考えてない。
２：クッキー処理などは考えてない。

[PRE]
<HTML>
<HEAD>
<LINK href="common/css/import.css" rel="stylesheet" type="text/css" media="all">
<SCRIPT type="text/javascript">

var strOldSelect = "";

function expandcontent( strSelect )
{
// 以前開いたものを閉じる
if( strOldSelect != "" )
{
document.getElementById( strOldSelect + "_button" ).style.display = "block";
document.getElementById( strOldSelect + "_text" ).style.display = "none";
}
// 指定したコンテンツを開く
document.getElementById( strSelect + "_button" ).style.display = "none";
document.getElementById( strSelect + "_text" ).style.display = "block";

strOldSelect = strSelect;
}

function do_onload()
{
expandcontent( "content1" );
}

if( window.addEventListener ) window.addEventListener( "load", do_onload, false );
else if( window.attachEvent ) window.attachEvent( "onload", do_onload );
else if( document.getElementById ) window.onload = do_onload;

</SCRIPT>
</HEAD>
<BODY>

<DL class="kigyou">
<DT>■文章タイトル</DT>
<DT id="content1_button" onclick="expandcontent('content1')"><A href="#">読む</A></DT>
<DD id="content1_text" style="display:none;">
・企業の「認知度」を上げて、ビジネスチャンスを広げたい！
</DD>
</DL>

<DL class="kigyou">
<DT>■文章タイトル</DT>
<DT id="content2_button" onclick="expandcontent('content2')"><A href="#">読む</A></DT>
<DD id="content2_text" style="display:none;">
・企業の「認知度」を上げて、ビジネスチャンスを広げたい！
</DD>
</DL>

<DL class="kigyou">
<DT>■文章タイトル</DT>
<DT id="content3_button" onclick="expandcontent('content3')"><A href="#">読む</A></DT>
<DD id="content3_text" style="display:none;">
・企業の「認知度」を上げて、ビジネスチャンスを広げたい！
</DD>
</DL>

</BODY>
</HTML>
[/PRE]
11   名前： 匿名 ： 2007/08/06（月） 18:55  ID:D/mQtTzV sub-Ax
すいません、[PRE]〜[/PRE]のところ、ホントは［pre］〜［/pre］としてタグ認識させるつもりでした。
12   名前： 匿名 ： 2007/08/06（月） 18:55  ID:kaW74DP9 sub-Cz
>>10
それだと非スクリプト環境で何もできなくなってしまう。だから、元スクリプトでは スクリプト有効時に style 要素を document.write() しているわけなんだ。この手のものを作る場合、style="display: none" なんてのを埋め込んでは絶対にダメ。スクリプト有効時に、必要な初期化を行うようにしよう。

まあ、元スクリプトも、nextSibling を辿れば良いものをいちいち id を付けさせたり、addEvent を定義しておきながら onclick 属性を付けさせたりと、実に無駄なことをやってるわけだが……。

# マルチポスト先を削除というのは、ある意味最悪の対応だぞ＞スレ主。
13   名前： 匿名 ： 2007/08/06（月） 18:55  ID:D/mQtTzV sub-Ax
>> 12
一番言いたいことは
開く閉じるという動作のアルゴリズムのことであって
環境に対するうんぬんってのは別です。

いまは、「こんなアルゴリズムなんてどう？」って言ってるだけですよぅ…(涙。
14   名前： 匿名 ： 2007/08/06（月） 18:55  ID:kaW74DP9 sub-Cz
>>13
それはすまなかった。

IE や Cookie など環境上の注意が書いてあるから、アルゴリズムの話とは思わなかったんだ。失礼しました。
15   名前： stage ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
的確で丁寧なご指示ありがとうございました。動作確認いたしました。
本当にありがとうございました。
16   名前： 匿名 ： 2007/08/06（月） 18:55  ID:91nLxahb sub-Cz
結局、何をどう動作確認したの？

>>10 をそのまま使うんじゃなくて、>>10 をもとに >>0-6 を貴方が修正するんだよ。分かってる？
17   名前： stage ： 2007/08/06（月） 18:55  ID:lF8Ck4U2 sub-nr
分かっております。
一覧へ戻る