【CSS・JS】開閉アニメーションのアコーディオンを作る

<div class="accordion js_accordion">
<p>ここは最初から表示されるテキストです。<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="accordion_more js_accordion_more">「続きを見る」ボタンのクリックで表示されるテキストです。<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="accordion_btn js_accordion_btn">
<p class="accordion_btn_txt is_active js_accordion_btn_txt">続きを見る</p>
<p class="accordion_btn_txt js_accordion_btn_txt">閉じる</p>
</div>
</div>

/* コンテンツのサイズ。数値は用途に応じて */
.accordion {
width: 500px;
margin: 100px auto;
}

/* 最初は「続きを見る」のテキストを非表示に。 */
.accordion_more {
display: none;
}

/* ボタンのスタイル */
.accordion_btn {
position: relative;
display: block;
width: 100%;
height: auto;
margin-top: 10px;
cursor: pointer;
}

/* ボタン右の矢印 */
.accordion_btn::before {
content: "";
position: absolute;
top: 50%;
right: 30px;
width: 10px;
height: 10px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(135deg);
margin-top: -8px;
}

/* ボタンのテキストスタイル */
.accordion_btn_txt {
display: none;
color: #ffffff;
font-size: 1.0rem;
text-align: center;
background-color: #245fb9;
border-radius: 10px;
transition: opacity 0.3s ease 0s;
padding: 12px 30px;
box-sizing: border-box;
}

/* 「続きを見る」が表示された時の矢印 */
.accordion_btn.is_active::before {
transform: rotate(-45deg);
margin-top: -2px;
}
.accordion_btn_txt.is_active {
display: block;
}

$(function () {
let el = {};

el.accordion = '.js_accordion';
el.accordion_more = '.js_accordion_more';
el.accordion_btn = '.js_accordion_btn';
el.accordion_btn_txt = '.js_accordion_btn_txt';
el.isActive = 'is_active'; // アコーディオン展開時に付与するclass名
el.slideSpeed = 500; // アコーディオン展開時の開閉速度

$(el.accordion_btn).on('click', function () {
$(this).parents(el.accordion).find(el.accordion_more).slideToggle(el.slideSpeed);
$(this).toggleClass(el.isActive);
$(this).parents(el.accordion).find(el.accordion_btn_txt).toggleClass(el.isActive);
});
});