次のHTMLタグを非表示表示できるjavascriptを作ってみた

こんにちは、鬱太郎です。先日あるものを作りました。

ここをクリック（タップ）してください

そう！クリックすると次のHTMLタグを表示非表示にできるプログラムを作りました。

あれ？デジャヴ・・・？

追記:改良型を作りましたこちらの記事をご覧ください

www.neetaro.com

次のタグ表示非表示モジュール(next-hidden.js)
前回のプログラムとの違い
動作デモ
- pタグにイベントを追加して、次のpタグを隠す
次の画像を表示非表示にさせるイベントを追加する
- 次のli要素を隠す
コードと使用例
応用
- 基本的にどんなタグでも追加できる
- 複数のタグを表示・非表示にさせる
終わりに

次のタグ表示非表示モジュール(next-hidden.js)

名前は相変わらずです。そもそもhideとhiddenの違いや使い方もよくわかっていませんｗ

hideよりもhiddenの方がかっこいいよね！

何ができるかというと、

クリック（タップ）すると次のHTMLタグを非表示や表示できる
最初から次のHTMLタグを非表示にするか表示したままかを選べる

この2点です。文章力なくてすみません。

前回のプログラムとの違い

www.neetaro.com

前回は見出し間を表示非表示にするものでした。今回のは、表示非表示させる部分を次のHTMLタグのみに限定することで、見出しだけでなく、すべてのタグにイベントを追加できるようになりました。

次のHTMLタグというのは親と子の関係でなく、兄弟の関係を指します。

<p class="next-hidden">ここをクリック</p>
<div>
 ....
</div>

上の例では<p>と<div>は兄弟関係にあります。<p>をクリックすると次のタグの<div>を表示非表示にできるイベントを<p>に追加します。

<div class="next-hidden">
  <p>あいうえお</p>
</div>
<ul>
 ...
</ul>

上の例では<div>と<p>は親子関係、<div>と<ul>は兄弟関係にあります。ですので、<div>をクリックすると<ul>を表示非表示にできるイベントを<div>に追加します。

動作デモ

`p`タグにイベントを追加して、次の`p`タグを隠す

<p>タグというのは文章を表示する際のタグですね。

<p class="next-hidden">ここをクリックすると、次のタグが表示非表示します</p>
<p>ちらっ |ω・`）</p>

ここをクリックすると、次のタグが表示非表示します

ちらっ |ω・`）

次の画像を表示非表示にさせるイベントを追加する

<p class="next-hidden"><a>ここをクリックして画像を見る</a></p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image">

ここをクリックして画像を見る

Markdown記法の方はこのように簡単に書けます

<p class="next-hidden"><a>ここをクリックして画像を見る</a></p>
[f:id:neet-utsu-taro:20170907193330j:plain]

ここをクリックして画像を見る

次の`li`要素を隠す

<ul>
  <li>未経験者歓迎</li>
  <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li>
  <li>残業代なし</li>
  <li>笑顔の絶えない職場です</li>
</ul>

未経験者歓迎

福利厚生充実（クリックしちゃダメ）

残業代なし

笑顔の絶えない職場です

コードと使用例

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

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

次のコードを記事に貼り付けてください。最初の1行はjQueryの読み込みです。既にヘッダー等に記述してある方は必要ありません。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
    var classSelector = ".next-hidden";
    var attrForNext = "data-display";
    var attrNextClass = "data-next-class";
    var display ="display";
    var none="none";

    $(classSelector).each(function(){
        if($(this).next().length){
            var init = $(this).attr(attrForNext);
            $(this).next().css(display,(init)?init:none);
            $(this).click(function(){
                if($(this).next().css(display) == none){
                    $(this).next().show();
                }else{
                    $(this).next().hide();
                }
            });
            var nextClass = $(this).attr(attrNextClass);
            if(nextClass){
                $(this).next().addClass(nextClass);
            }            
        }
    })
})
</script>

2.イベントを登録したいタグにクラス名や属性を追加する

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

そのまま記法の方は、HTML編集ページから、Markdown記法の方は直接記述できます。

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

class="next-hidden"を記述することで、そのタグに次のタグを表示非表示にさせるイベントを追加します。このとき、デフォルトで次のタグの要素を非表示にします。

<p class="next-hidden"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにclass="next-hidden"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。

最初に次のタグを表示しておきたい場合

さらにdata-display="block"という属性を追記することで、初期状態を決定できます。

<p class="next-hidden" data-display="block"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden" data-display="block"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。</p>

ここをクリック

タグにclass="next-hidden" data-display="block"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。

次のタグにクラス名を付けたい場合

CSSなどで非表示にさせるタグにデザインを追加したい場合があるかもしれません。その場合はdata-next-class="hogehoge"の様に記述することで、クラス名が次のタグに追加されます。

<style>.hogehoge{background-color: gray;}</style>
<p class="next-hidden" data-next-class="hogehoge"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden" data-display="block"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。</p>

ここをクリック

タグにclass="next-hidden" data-next-class="hogehoge"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグにクラス名が追加されます。これを使ってデザインを変更できます。

上の例ではクラス名hogehogeに背景を灰色にするCSSを追加しています。

機能のまとめ

class="next-hidden"で機能を追加
読み込み時はデフォルトで非表示。data-display="block"で読み込み時に表示
data-next-class="..."で次のタグにクラス名を追加

応用

基本的にどんなタグでも追加できる

基本的にはどんなタグでもイベントを追加できます。ただし、クリック(タップ)できるものでないとイベントは発生しません。

<div class="next-hidden"></div>
<p>ここが隠れます</p>

ここが隠れます

この場合でも正常にイベントが追加されますが、ユーザーが<div>タグをクリック(タップ)できないため表示非表示をさせることができません。

CSSなどを駆使して、ユーザーがクリック(タップ)できるサイズにする必要があります。

<div class="next-hidden" style="width:30px;height:30px;background-color:blue;"></div>
<p>ここが隠れます</p>

ここが隠れます

上記の例は<div>にサイズを設定して、色を付けました。青色の部分をクリックするとイベントが発生し、下のタグが表示・非表示されます。

複数のタグを表示・非表示にさせる

このプログラムは次のタグだけしか表示・非表示にできません。

<p class="next-hidden"><a>募集要項はこちら</a></p>
<p>具体的な内容を下に並べました。</p>
<ul>
  <li>未経験者歓迎</li>
  <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li>
  <li>残業代なし</li>
  <li>笑顔の絶えない職場です</li>
</ul>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image" width="200" height="200">

募集要項はこちら

具体的な内容を下に並べました。

未経験者歓迎

福利厚生充実（クリックしちゃダメ）

残業代なし

笑顔の絶えない職場です

本当は画像まですべて非表示にさせたいと思っても、そのままでは次のタグしか非表示にできません。

しかし、<div>で囲むとまとめて非表示にできます。

<p class="next-hidden"><a>募集要項はこちら</a></p>
<div>
  <p>具体的な内容を下に並べました。</p>
  <ul>
    <li>未経験者歓迎</li>
    <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li>
    <li>残業代なし</li>
    <li>笑顔の絶えない職場です</li>
  </ul>
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image" width="200" height="200">
</div>