【アコーディオンメニュー】ボタンのテキストを入れ替え【続きを表示・閉じる】

続きを表示ボタンをクリックで追加のコンテンツを表示し、ボタン内のテキストを「続きを表示」から「閉じる」へ変更します。閉じるボタンをクリックで追加されたコンテンツを非表示にし、ボタン内のテキストを「閉じる」から「続きを表示」へ変更します。

htmlのコードは下記になります。
リストのliタグ内にバナー画像を配置した構造です。ulタグは最初から表示するコンテンツと非表示にするコンテンツを分けて記述しています。

<ul>
	<li><a href="#"><img src="banner01.png" alt=""></a></li>
	<li><a href="#"><img src="banner02.png" alt=""></a></li>
	<li><a href="#"><img src="banner03.png" alt=""></a></li>
	<li><a href="#"><img src="banner04.png" alt=""></a></li>
	<li><a href="#"><img src="banner05.png" alt=""></a></li>
	<li><a href="#"><img src="banner06.png" alt=""></a></li>
</ul>
<ul>
	<li><a href="#"><img src="banner07.png" alt=""></a></li>
	<li><a href="#"><img src="banner08.png" alt=""></a></li>
	<li><a href="#"><img src="banner09.png" alt=""></a></li>
</ul>
<div class="btnset">
	<a href="#" class="button boxopen">続きを表示</a>
</div>

続いてCSSのコードです。
バナー画像を格納するliタグはFlexboxで横並びにしています。ボタン内のプラス（＋）はクラス名boxopenの疑似要素で作成します。beforeで縦線、afterで横線です。マイナス（－）はクラス名boxcloseの疑似要素で作成します。afterの横線のみです。

ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
ul li {
	width: calc(calc(100% - 31px) / 3);
	margin: 0 15px 15px 0;
	list-style-type: none;
}
ul li:nth-child(3n) {
	margin: 0 0 15px;
}
.btnset {
	width: 180px;
	margin: 0 auto;
	padding: 15px 0 0;
}
.btnset .button {
	border: 1px solid #9a9a9a;
	padding: 7px 0 5px 0;
	text-align: center;
	color: #333;
	display: inline-block;
	width: 180px;
	box-sizing: border-box;
	position: relative;
	text-decoration: none;
}
.boxopen:before {
	display: block;
	content: "";
	position: absolute;
	top: 34%;
	right: 13px;
	width: 6px;
	height: 13px;
	border-left: solid 1px #333;
}
.boxopen:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	width: 13px;
	height: 6px;
	border-top: solid 1px #333;
}
.boxclose:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	width: 13px;
	height: 6px;
	border-top: solid 1px #333;
}
@media screen and (max-width: 480px) {
	.more_section ul {
		display: block;
	}
	.more_section ul li {
		width: 100%;
		max-width: 250px;
		margin: 0 auto 15px;
	}
	.more_section ul li:nth-child(3n) {
		margin: 0 auto 15px;
	}
}

最後にjQueryのコードです。
ページ表示時はクラス名btnsetの直前の兄要素であるulタグをprevで指定し、hideで非表示にします。
ボタンクリック時はそのulタグの表示・非表示をisで判定し処理を分岐します。非表示の状態であればslideDownで表示し、クラス名buttonのaタグのテキストを「閉じる」に変更、aタグのクラス名をboxopenからboxcloseへ変更します。表示の状態であればslideUpで非表示にし、クラス名buttonのaタグのテキストを「続きを表示」に変更、aタグのクラス名をboxcloseからboxopenへ変更します。
なお、ボタンクリック時にpreventDefaultでaタグのherf属性のページ遷移を発生させないようにしています。

$(function() {
	$('.btnset').prev().hide();
	$('.btnset').click(function(e) {
		e.preventDefault();
		if ($(this).prev().is(':hidden')) {
			$(this).prev().slideDown();
			$(this).find('.button').text('閉じる').addClass('boxclose').removeClass('boxopen');
		} else {
			$(this).prev().slideUp();
			$(this).find('.button').text('続きを表示').removeClass('boxclose').addClass('boxopen');
		}
	});
});