広告

リンクボタンをクリックすると、通常閉じているコンテンツが自動で開いて開いたところに遷移

リンク先でコントロールJavaScript
この記事は約3分で読めます。

タイトル長い!

リンク先で、JavaScriptを使って、次のような動作をさせたくて、作ってみました。

『ページB』ボタンをクリックすると開くコンテンツがあるページで、普通にリンクで開くと、コンテンツは閉じた状態。

『ページA』ページBに遷移したときに、隠れているコンテンツを自動で開いて、開いた部分に飛ぶ。

リンク先でコントロール

『ページA』のリンクボタン

WordPressのループ内なら(記事一覧ページのカードの中など)

<a href="<?php echo esc_url(get_the_permalink()); ?>#comment-desu">コメント</a>

<?php echo esc_url(get_the_permalink()); ?>
現在のURL(ループでのIDのURL)をget_the_permalinkで取得して、esc_urlでサニタイズ(WordPressの関数)
※ループの中で使っているので、注意してください。

通常なら、こんな感じ

<a href="./index.html#comment-desu">コメント</a>

『ページB』のJavaScript

  <script>
  var urlhash = location.hash ;
  if (urlhash == '#comment-desu') {
  var commentreplybtn = document.getElementById('comment-reply-btn');
  commentreplybtn.style.display = 'none';
  var respond = document.getElementById('respond');
  respond.style.display = 'block';
  }
  </script>

location.hash
URL のうち、'#' とそれに続くフラグメント識別子を取得

ちなみに、URL全体を取得するのは、location.href
ただし、プロトコル「http://」「https://」は含まれません。

プロトコル「http://」「https://」を含んだURL全体を取得するなら、location.origin

id="comment-reply-btn"
としたタグに、style="display:none;"と加えるJavaScriptが

var commentreplybtn = document.getElementById('comment-reply-btn');
commentreplybtn.style.display = 'none';

id="respond"
としたタグに、style="display:block;"と加えるJavaScriptが

var respond = document.getElementById('respond');
respond.style.display = 'block';

『ページB』の通常閉じている部分

<div id="comment-desu">
通常は閉じているコンテンツ
</div>