~徒然なる雑記帳~

みなずきめい.ねっと

雑記

サイドバーを一部折りたたみ化した

投稿日:

サイドバーを一部折りたたみ化しました。
思ったより手こずって2日つぶれたけど・・・orz
おまけにバグあり・・・
なんかデフォルトで開いているものを閉じる際に
1回目のクリックが無反応。
でも調査する気力も尽きました・・・。
参考にしたのは先駆け防忘録さんのこちらの記事
他の手段は正直挫折しました。
確かにこれが一番簡単かも・・・


そのままだと、デフォルトでは全て閉じた状態になるので
少し手を加えてデフォルトで開いた状態も可能にしました。
手を加えたといっても少しだけですが、


if(document.getElementById){

    document.writeln('<style type="text/css" media="all">');

    document.writeln('<!--');

    document.writeln('.sidehide{display:none}');

    document.writeln('-->');

    document.writeln('</style>');

       }

if(document.getElementById){

    document.writeln('<style type="text/css" media="all">');

    document.writeln('<!--');

    document.writeln('.sideview{display:block}');

    document.writeln('-->');

    document.writeln('</style>');

       }

function showHide(id){

    var disp = document.getElementById(id).style.display;

    if(disp == "block"){

        document.getElementById(id).style.display = "none";

    }

       else{

        document.getElementById(id).style.display = "block";

    }

    return false;

       }

function hideShow(id){

    var disp = document.getElementById(id).style.display;

    if(disp == "none"){

        document.getElementById(id).style.display = "block";

    }

       else{

        document.getElementById(id).style.display = "none";

    }

    return false;

       }


上記のように赤色文字部分を加えただけです。
これでclass="sideview"でデフォルトオープンに
class="sidehide"でデフォルトクローズになります。

あとは、先駆け防忘録さんと同じ設定方法か
自由形式ならば頭に


<DIV class=sidetitle><a href="javascript:void(0);" onClick="showHide('AAA’);">サブタイトル</a></DIV>

<div class="sideview" id="AAA">


末尾に</div>をつけるだけです。
赤字の部分は適宜変更してください。
サブタイトルはこのブログで言えば「カウンタ」とか「ココロの部屋」にあたる部分です。
AAAは判別用ID。名前は何でもOKですが、両方とも同じ名前にする必要があります。
sideviewはデフォルトオープン、逆にクローズはsidehideです。
・・・ま、いつかはバグ取りが必要でしょうが、今回はここまででいいや。

-雑記

Copyright© みなずきめい.ねっと , 2019 All Rights Reserved.