記事の見出し間を表示非表示にできるjavascriptを作ってみた

こんにちは、鬱太郎です。昨日一昨日とJavaScriptとjQueryをいじりつつ、あるものを作っていました。

こんなのを作ってみました クリックしてみてください

そう！見出しをクリックするとその内容を表示非表示にできるモジュールを作りました。今日はこれについて話していきたいと思います。

見出し間表示非表示イベントモジュール（toggle-header.js）

名前は私のネーミングセンスの結晶の塊です。あまり責めないでくださいｗ具体的に何ができるかというと、

• 見出しをクリックするとその見出しから次の見出しまでを表示非表示にできる
• 最初から見出しの次の内容を非表示にできる

この2点です。自分で説明しててもよくわかりません。（文章力がなくて申し訳ないです）

動作デモ

動作デモの見出しの中身のすべての見出しは先ほど説明したモジュールが組み込まれています。見出しを色々とクリックしてみてください。

読み込み時は見えているが、見出しをクリックすると消えたり見えたりするよ

あああああああああああああああああああああああああああああああああああああああああああああああああ

読み込み時には見えていないけど、見出しをクリックすると見えたり消えたりするよ

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ「ようこそ」

実は動作デモの見出しもクリックすると開いたり閉じたりするよ！

何に使うの？

といっても、何に使うと便利なんでしょうか？私がいろいろと考えてみました。

ソースコードなど、とにかく長い文章を書くとき

私はプログラムを作ってそれを乗っけたりしています。するととても長い文章を表示しなくてはいけない時もあります。

皆さんも原因は違えど、とても長い文章や写真の羅列などをしたことがあるのではないでしょうか？

その時にこのモジュールを使うと、読者の方も見やすいのではないでしょうか？

下はその例です。

サンプルソースコードをクリックして見る

問題の回答など隠したい要素があるとき

例えば読者に問いかけるような内容の記事の場合には、このモジュールは有効かもしれません。

1+1は？

クリックして答えを見る

2!

ロマン

はい。ロマンですそれ以上に何もないです。皆さんも何かに使ってみませんか？

コードと使用例

実際の使い方を説明していきます。

1.スクリプトコードを記事の先頭に貼り付ける

次のスクリプトコードを記事の先頭に貼り付けてください。

• 見たまま記法の方はHTMLモードの先頭に貼り付けてください
• Markdown記法の方は先頭に直接貼り付けられます

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
    //<h2,h3,h4... class="toggle-header" [data-display="none"][data-clink="1"]></h2,h3,h4,...>
    //セレクタ用
    var headerClass=":header.toggle-header";
    var headerAttrForDiv="data-display";
    var headerAttrForP="data-clink";
    
    //閉じるボタンのクラス CSS用に必要かも
    var closeLinkClass = "close-link";

    //閉じるリンクの説明文字

    var linkTextPre="<p class='"+closeLinkClass+"'><a>ここをクリックすると『";
    var linkTextPost = "』が閉じます</a></p>";

    $(headerClass).each(function(){

        var level = this.nodeName.toLowerCase().slice(-1);

        var nextHeader = "h1";
        for(var i=2;i<=level;i++){
            nextHeader += ",h" + i;
        }

        if($(this).nextUntil(nextHeader).length){
            $(this).click(function(){
                if($(this).next().css("display")=="none"){
                    $(this).next().show();
                }else{
                    $(this).next().hide();
                }
            });

            var init = $(this).attr(headerAttrForDiv);
            var divStr = "<div style='display:"+((init)?init:"block")+"'>";
            var linkStr = linkTextPre + $(this).text() + linkTextPost;
            $(this).nextUntil(nextHeader).wrapAll(divStr);
            if($(this).attr(headerAttrForP)){
                $(this).nextUntil(nextHeader).last().append(linkStr);
                $(this).next().children(":last").click(function(){
                    $(this).parent().hide();
                })
            }
        }
    });
})   
</script>             

1行目はjQueryの読み込みです。既にヘッダー等に同様の記述がある場合は必要ありません。

2.見出しにクラス名や属性を追加する

ソースコードをコピペした後は、見出しにクラス名を付けるだけで機能します。

そのまま記法の方はHTML編集のページから非表示させたい見出しh1,h2,h3...などを見つけてクラス名や属性を追加してください。Markdown記法の方はHTMLコードを直接記述できます。

デフォルト動作の記述方法

class="toggle-header"を記述することでその見出しにクリックのイベント機能が追加されます。

<h5 class="toggle-header">デフォルト動作</h5>
<p>見出しタグに<code>class="toggle-header"</code>を追加することでクリックすると非表示表示させる機能が付きます</p>

デフォルト動作

見出しタグにclass="toggle-header"を追加することでクリックすると非表示表示させる機能が付きます

最初に非表示からスタートさせる記述方法

最初から内容を非表示にしたい場合はdata-display="none"をさらに追加します。

<h5 class="toggle-header" data-display="none">最初に表示させない</h5>
<p>見出しタグに<code>class="toggle-header" data-display="none"</code>を追加することで最初に表示はさせずに、クリックすると表示非表示させる機能が付きます</p>

最初に表示させない

見出しタグにclass="toggle-header" data-display="none"を追加することで最初に表示はさせずに、クリックすると表示非表示させる機能が付きます

末尾に非表示にさせるリンクを追加する

末尾にクリックすると見出しをクリックしたときと同じように非表示にできるリンクを追加します。data-clink="1"をさらに追加します。例ではdata-display="none"を使っていませんが、もちろん両方使えます。

<h5 class="toggle-header" data-clink="1">末尾にリンクを追加</h5>
<p>見出しタグに<code>class="toggle-header" data-clink="1"</code>を追加することで、末尾にクリックすると非表示させるリンクが付きます</p>

末尾にリンクを追加

見出しタグにclass="toggle-header" data-clink="1"を追加することで、末尾にクリックすると非表示させるリンクが付きます

機能のまとめ

• class="toggle-header"を追加したいヘッダーにつける
• data-display="none"で初期状態は非表示
• data-clink="1"で末尾に非表示リンクを追加

です。少し難しいですが、ぜひ試してください！

注意事項

このプログラムはclass="toggle-header"を指定した見出しレベルを読み取って動作しています。<h3 class="toggle-header">ならば見出しレベルは3ですね。

プログラムはclass="toggle-header"を指定した見出しレベルを含むそれ以上の見出しが出るまで、それを非表示にさせる内容ととらえます。見出しレベルが3ならば、<h1><h2><h3>が次に出るまでの内容をまとめて表示非表示にさせるイベントを追加します。<h4><h5><h6>の内容がかかれていてもそれもまとめて非表示にさせてしまうことがあります。下がその例です。

<h3 class="toggle-header" data-display="none">見出し3</h3>
<p>見出し3の内容</p>
<h4 class="toggle-header" data-display="none">見出し4</h4>
<p>見出し4の内容</p>
<h5 class="toggle-header" data-display="none">見出し5</h5>
<p>見出し5の内容</p>
<h3 class="toggle-header" data-display="none">見出し3-2</h3>
<p>見出し3-2の内容</p>
<h4 class="toggle-header" data-display="none">見出し4-2</h4>
<p>見出し4-2の内容</p>
<h5 class="toggle-header" data-display="none">見出し5-2</h5>
<p>見出し5-2の内容</p>

<p>ここは非表示にさせたくない！</p>

見出し3

見出し3の内容

見出し4

見出し4の内容

見出し5

見出し5の内容

見出し3-2

見出し3-2の内容

見出し4-2

見出し4-2の内容

見出し5-2

見出し5-2の内容

ここは非表示にさせたくない！

この動作は仕様なのですが、レベルが下の見出しもまとめて表示非表示にさせたくない場合もあるでしょう。

その場合は対応した見出しレベルのダミーを追加することで、問題を解決できます。対応する見出しにstyle="display:none"を付けることでうまく動作します。

<h3 class="toggle-header" data-display="none">見出し3</h3>
<p>見出し3の内容</p>
<h3 style="display:none"></h3>
<h4 class="toggle-header" data-display="none">見出し4</h4>
<p>見出し4の内容</p>
<h4 style="display:none"></h4>
<h5 class="toggle-header" data-display="none">見出し5</h5>
<p>見出し5の内容</p>
<h5 style="display:none"></h5>
<h3 class="toggle-header" data-display="none">見出し3-2</h3>
<p>見出し3-2の内容</p>
<h3 style="display:none"></h3>
<h4 class="toggle-header" data-display="none">見出し4-2</h4>
<p>見出し4-2の内容</p>
<h4 style="display:none"></h4>
<h5 class="toggle-header" data-display="none">見出し5-2</h5>
<p>見出し5-2の内容</p>
<h5 style="display:none"></h5>
<p>ここは非表示にさせたくない！</p>

見出し3

見出し3の内容

見出し4

見出し4の内容

見出し5

見出し5の内容

見出し3-2

見出し3-2の内容

見出し4-2

見出し4-2の内容

見出し5-2

見出し5-2の内容

ここは非表示にさせたくない！

終わりに

ここまで読んでくださってありがとうございます！

ここ最近はjavascriptやjQueryを触りまくっていました。ほぼほぼ初心者でしたが、今では少しはコードも書けるようになったと思います。

興味のある方はぜひこのスクリプトで遊んでください！私が泣いて喜びます！

読者登録ありがとうございます。スターやブックマーク、コメント等もありがとうございます！励みになってます。

またね('ω')ノ