もっと見るボタンの実装方法は以前も記事にしましたが、今回は閉じるボタン付きのものを作成してみました。
使い方（テキストVer）
もっと見るボタンより前の兄弟要素が非表示だったら、
クリックした時にテキストとクラス名を変更するようにしています。
jQuery
$(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');
}
});
});
html
<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>
使い方（画像Ver）
基本的な構造はテキストVerと同じですが、$(this).children(‘img’) でクリックした要素の子要素の画像名を置換して、画像を変更しています。
ここで子要素に限定しないと、もっと見るボタンが2つ以上あった場合に、全ての画像が置換されてしまうことになります。
jQuery
$(function () {
$('.button').prevAll().hide();
$('.button').click(function () {
if ($(this).prevAll().is(':hidden')) {
$(this).prevAll().slideDown();
$(this).children('img').attr("src", $('.button img').attr("src").replace("-more", "-close"));
} else {
$(this).prevAll().slideUp();
$(this).children('img').attr("src", $('.button img').attr("src").replace("-close", "-more"));
}
});
});
html
<div class="content">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p class="button">
<img src="https://gimmicklog.com/demo/images/btn-more-300.gif" />
</p>
</div>
<div class="content">
<ul>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>
<p class="button">
<img src="https://gimmicklog.com/demo/images/btn-more-300.gif" />
</p>
</div>