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>