[javaScript] jQuery accordion 제이쿼리로 아코디언 구현

HTML

<div class="tab_conbox">
    <div class="acco_wrap js_acco_wrap">
        <div class="acco_conbox">
            <button type="button" class="acco_btn js_btn_acco on">
                아코디언 1
            </button>
            <div class="acco_con js_acco_con">
                아코디언 1 콘텐츠 내용
            </div>
        </div>
        <div class="acco_conbox">
            <button type="button" class="acco_btn js_btn_acco">
                아코디언 2
            </button>
            <div class="acco_con js_acco_con">
                아코디언 2 콘텐츠 내용
            </div>
        </div>
    </div>
</div>

 

CSS

.acco_conbox {
	overflow: hidden;
	border-radius: 32px;
	-webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
}
.acco_conbox + .acco_conbox {
	margin-top: 30px;
}
.acco_btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 40px;
	background-color: #fff;
	font-size: 36px;
	font-weight: 700;
	text-align: left;
}
.acco_btn:after {
	display: block;
	content: "";
	position: absolute;
	top: 36px;
	right: 40px;
	width: 40px;
	height: 40px;
	background-image: url("ico_acco_arr.png");
	background-size: contain;
	transform: rotate(180deg);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.acco_btn.on:after {
	transform: rotate(0deg);
}
.acco_con {
	padding: 0 40px 40px;
}

 

jQuery

function accordion() {
	let btnAcco = $(".js_btn_acco");
	$(".js_acco_con").hide();
	$(".js_acco_wrap .acco_conbox:first-child .js_acco_con").show();

	btnAcco.on("click", function () {
		$(".js_btn_acco").not(this).removeClass("on");
		$(this).toggleClass("on");
		$(this).parent().siblings().find(".js_acco_con").slideUp();
		$(this).next(".js_acco_con").stop().slideToggle();
	});
}