ヘッダーロゴ

jQueryでクリックした要素以外を非表示にする方法

jQueryを使って、クリックした要素以外を非表示にする方法を共有します。

clock_hide

ソースへ移動↓

oyakun
検索しても情報があまりなかったので備忘録っす

特にWordPressの記事単位でjQueryを設定し、動作させたいときに有効です。

jQueryでクリックした要素以外を非表示にするソース

全体のソースと動き↓

See the Pen zYNLMrV by OYAKUN (@oyakudachixyz) on CodePen.

実装内訳を記します。

html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Click_hideTEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <main>
      <div class="item-box">
        <span id="open-a" class="item">あ</span>
      </div>
      <div class="item-box">
        <span id="open-ka" class="item">か</span>
      </div>
      <div class="item-box">
        <span id="open-sa" class="item">さ</span>
      </div>
      <div class="item-box">
        <span id="open-ta" class="item">た</span>
      </div>
      <div class="item-box">
        <span id="open-na" class="item">な</span>
      </div>
      <!-- クリック後表示 -->
      <div class="open-a section">
        <p>あいうえお</p>
      </div>
      <div class="open-ka section">
        <p>かきくけこ</p>
      </div>
      <div class="open-sa section">
        <p>さしすせそ</p>
      </div>
      <div class="open-ta section">
        <p>たちつてと</p>
      </div>
      <div class="open-na section">
        <p>なにぬねの</p>
      </div>
    </main>
    <footer></footer>
  </body>
</html>

CSS

main{
  text-align:center;
}

.item-box {
  display:inline-block;
  margin-top:2px;
}

.item-box:hover {
  cursor:pointer;
  opacity:0.7;
}

.item {
  display:inline-block;
  color:#fff;
  background:#d4d9dc;
  padding:1em;
}

jQuery

$(function(){
      $('.section').hide();
      $('.item').on('click',function(){
        $('.section').not($('.'+$(this).attr('id'))).hide();
        $('.'+$(this).attr('id')).show();
      });
    });

クリックした要素以外を非表示にする設定

jQueryでクリックした要素以外を非表示にする手順は以下のとおり。

  1. 非表示となる要素を作成する
  2. jQueryを設置する
  3. CSSで装飾する

以下解説です。

1. htmlに非表示となる要素を作成する

クリック後に開く要素を囲むdivに、非表示にさせるためのクラス名を付与。今回はclass="section"を指定しました。

<div class="section">
  <p>あいうえお</p>
</div>

次に、

  • クリック対象のクラス名
  • クリック後に開く要素のクラス名

以上が対になるように、spanタグと非表示要素のクラス名を設定しておきます。

<div class="item-box">
  <span id="open-a" class="item">あ</span>
</div>
<!-- クリック後表示
 -->
<div class="open-a section">
  <p>あいうえお</p>
</div>

2. jQueryを読み込ませる

htmlにjQueryを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

実装するjQueryの説明は以下の通りです。

$(function(){
      $('.section').hide();
      $('.item').on('click',function(){
        // クリックした要素の ID と違うクラスのセクションを非表示
        $('.section').not($('.'+$(this).attr('id'))).hide();
        // クリックした要素の ID と同じクラスのセクションを表示
        $('.'+$(this).attr('id')).show();
      });
    });

以下記事を大変参考にさせていただきました。ありがとうございます。

[jQuery] クリックでセクションの表示・非表示を切り替える

3. CSSで装飾する

ここは説明不要だと思いますが、見栄えを良くした箇所についてほんの少しだけ触れておきます。

  • mainにtext-align:centerを付与
  • item-boxをinline-blockを付与
  • itemもinine-blockを付与
oyakun
CSSの部分は今回の記事とはそこまで深く関与してないので、そこまで気にせずで良いかもです

jQueryでクリックした要素以外を非表示にする方法|まとめ

クリック対象の要素以外がうまく隠れるようになりましたか? うまく活用することで、

  • 滞在時間を増やしたり
  • 自然なキュレーションページの作成

といったことが可能です。

ただし、冗長なjQueryを記述する場合は、別ファイルにて読み込ませることが望ましいです。

oyakun
潜在的な記事を忍ばせておけば、大幅な回遊率UPに繋がるかもですね!

関連:GASで複数の宛先へメール送信する際の設定方法
関連:【即戦力】GASでアラートメールを作成して期日になったら自動通知

  • この記事を書いた人
  • 最新記事

OYAKUN

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

© 2021 OYAKUDACHI.XYZ