【Vanilla JS】「もっと見る」ボタンの実装（n件ずつ表示、SPのみ）

概要

用途・要件

• もっと見る(load more)などのボタンを押すことで、任意の数ずつ表示させる。（SP時のみ）
• DEMOではSP時、初期表示5件、クリック時に3件ずつ表示する。（件数は任意に設定可能）
• 非表示のリスト要素を全て表示すると、「もっと見る」ボタンは非表示になる。
• PC時は全件表示する。（もっと見るボタンは非表示）
• 表示させるリスト要素は予め全て出力しておく必要がある。
• SPブレイクポイントは1つ設定。
• リサイズイベントは使用しない。（ window.matchMedia()使用 ）
• 同一ページへの複数設置可能。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)

実装方法