moreボタンで続きを読む

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

jQuery

text$(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'); //次のボタンを表示
});
});

HTML

<div class="main">
		<div class="content">
		    <ul>
		        <li>トマト</li>
		        <li>キャベツ</li>
		        <li>もやし</li>
		    </ul>
		</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>
	</div>