$(function () { $('.button').prevAll().hide(); $('.button').click(function () { if ($(this).prevAll().is(':hidden')) { $(this).prevAll().slideDown(); $(this).text('閉じる').addClass('close'); } else { $(this).prevAll().slideUp(); $(this).text('もっと見る').removeClass('close'); } }); });
<div class="content"> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> <p class="button">もっと見る1</p> </div> <div class="content"> <ul> <li>List 4</li> <li>List 5</li> <li>List 6</li> </ul> <p class="button">もっと見る2</p> </div>
.button { text-align:center; padding:10px; color:#fff; background:#03A9F4; width:200px; } .close { background:#666; }