jQuery-もっと見るボタンで要素を表示する

もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。
読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が求められたりしたので覚え書き。

サンプルページ

html

<div class="content">
	<ul>
		<li>トマト</li>
		<li>キャベツ</li>
		<li>もやし</li>
	</ul>
<!-- / .content --></div>
	<div class="more">もっと見る</div>

<div class="content">
	<ul>
		<li>りんご</li>
		<li>なし</li>
		<li>みかん</li>
	</ul>
<!-- / .content --></div>
	<div class="more">もっと見る</div>

<div class="content">
	<ul>
		<li>さんま</li>
		<li>さば</li>
		<li>あじ</li>
	</ul>
<!-- / .content --></div>
	<div class="more">もっと見る</div>

<div class="content">
	<ul>
		<li>うし</li>
		<li>とり</li>
		<li>ぶた</li>
	</ul>
<!-- / .content --></div>

javaScript(jQuery)

上記のhtmlよりも前に記述してください。後に記述すると非表示の要素が一瞬表示されてしまいます。

<script>
$(function(){
	$('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示
	$('.more').nextAll('.more').css('display','none');//ボタンを非表示
	$('.more').on('click', function() {
		$(this).css('display','none');//押したボタンを非表示
		$(this).next('.content').slideDown('fast');
		$(this).nextAll('.more:first').css('display','block'); //次のボタンを表示
	});
});
</script>

RELATED POSTS