Webページで「もっと見る」を実装する仕組み

5月 29, 2022

クラウドソーシングの依頼ネタになります。

Webページを見ていると、長文やリストの初めの一部が表示されていて、「もっと見る」や「…」などで、続きが表示できる場合があります。

これをどのように実装するかと言う話です。

コンテンツの一部を非表示にしておき、ボタンなどのトリガーで表示に切り替える方法

リストの一部を非表示（display: none）にしておき、ボタンクリックで表示に切り替えるものです。

コンテンツの一部を隠しておき、ボタンなどのトリガーで見せる方法

長文の後半を表示枠外（heightなどのを狭くして）にしておき、ボタンクリックで表示枠を大きくして残りを見せるものです。

本文にないコンテンツをもっと見る

依頼主さんは、「最初のページソース内容には続きの部分が記載されておらず、開発者ツールにて確認してても「もっとみる」ボタンを押したときに追加のリクエストが飛んでいる形跡も確認できていない」と言っています。

下記が、少し近い気はしますが、コンテンツが無いわけではなく、アコーディオンの開閉時にhtmlの構成を変えて、同じコンテンツを違う場所で見せている感じですね。

htmlの仕組み的には、ブラウザ側で見せるコンテンツは、以下のどれかかですから、依頼主さんが見つけられていないだけな気がします。

1. html内に記載されている
2. Script内に定義されている
3. Scriptで動的に取得してくる