javascript 开闭ボタン

Posted 2021-05-04

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

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