近年、ウェブサイトやアプリケーションの開発において、ユーザーエクスペリエンスの向上が重視されています。その中で、コンテンツの表示を効果的に管理することは重要な要素の1つです。この記事では、CSSとjQueryを使用して、ニュースリストの表示切り替えを実現する方法について紹介します。
目的
例えば、ウェブサイトのトップページには最新のニュース記事が掲載されていますが、過去の記事も一覧表示しておきたいという場合があります。しかし、過去の記事が多くなるとページが長くなり、ユーザーがスクロールする手間が増えます。そこで、過去の記事を必要に応じて表示/非表示に切り替える仕組みが求められます。
CSSで過去分を非表示にする
まず最初に、CSSを使用して表示切り替えを実現します。nth-childセレクタを活用し、4番目以降の要素を非表示に設定します。
.news-list > li:nth-child(n+4) {
display: none;
}jQueryで開閉機能を実装
次に、jQueryを使用してボタンをクリックした際に表示を切り替える機能を実装します。以下のコードは、.news-btnクラスを持つ要素がクリックされたときに、ニュースリストの表示/非表示を切り替える処理を行います。
$('.news-btn').on('click', function() {
$('.news-list > li:nth-child(n+4)').slideToggle();
if ($(this).hasClass('is-active')) {
$(this).children('.news-btn-txt').text('もっと見る');
} else {
$(this).children('.news-btn-txt').text('閉じる');
}
$(this).toggleClass('is-active');
});サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ニュースリストの表示切り替え</title>
<style>
.news-list > li:nth-child(n+4) {
display: none;
}
</style>
</head>
<body>
<ul class="news-list">
<li>
<div class="news">
<div class="news-dt">令和6年5月xx日</div>
<div class="news-txt">xxxxxxxxxサイトを開設しました。</div>
</div>
</li>
<!-- 他のニュースリスト項目 -->
</ul>
<p class="news-btn"><span class="btn-icon"></span><span class="news-btn-txt">もっと見る</span></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.news-btn').on('click', function() {
$('.news-list > li:nth-child(n+4)').slideToggle();
if ($(this).hasClass('is-active')) {
$(this).children('.news-btn-txt').text('もっと見る');
} else {
$(this).children('.news-btn-txt').text('閉じる');
}
$(this).toggleClass('is-active');
});
</script>
</body>
</html>今回は常時表示するニュースは3件にして、4件目以降のニュースは過去分として開閉できるようにしています。
件数を変更する場合は、:nth-child(n+4)の、4を任意の数値に変更してください。
まとめ
以上が、ニュースリストの表示切り替えを実現するための方法です。これにより、ユーザーは必要な情報に素早くアクセスできるようになり、ウェブサイトの使いやすさが向上します。是非、実際のプロジェクトに取り入れてみてください。
