Edit in JSFiddle

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

<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>
</div>
<div class="more">もっと見る</div>

<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>
</div>

body {
  padding:40px;
}
.more {
	background: #0058B0;
	color: #fff;
	width: 200px;
	text-align: center;
	padding: 5px;
	cursor: pointer;
}
li {
	margin: 0 0 5px;
}