아코디언 토글메뉴

<section id="toggle_wrap" data-aos="fade-up" class="aos-init aos-animate">
        <div class="tg_list">
            <ul>
                <li>
                    <div class="title_box on">
                        <h3><em>1단계</em><span>제목</span></h3>
                        <i class="xi-angle-down"></i>	
                    </div>
                    <div class="cont_box" style="display: none;">
                        내용
                    </div>
                </li>
                <li>
                     <div class="title_box on">
                        <h3><em>1단계</em><span>제목</span></h3>
                        <i class="xi-angle-down"></i>	
                    </div>
                    <div class="cont_box" style="display: none;">
                        내용
                    </div>
                </li>
            </ul>
        </div>
</section>


<style>
#toggle_wrap {position: relative;} 
#toggle_wrap .tg_title {margin-bottom: 6rem;}
#toggle_wrap .tg_list {}
#toggle_wrap .tg_list li {position: relative;margin:.5rem 0;}
#toggle_wrap .tg_list .title_box {position: relative; background: var(--main-color2); border-radius:1rem; transition: all 0.2s linear; padding: 2rem;cursor: pointer; display:flex;align-items: center; justify-content: flex-start;}
#toggle_wrap .tg_list .title_box h3 {font-size: 1em; font-weight: 300;}
#toggle_wrap .tg_list .title_box h3 > em {margin-right:2rem; display: inline-flex;align-items: center; justify-content: center;	font-weight: bold;color: var(--main-color1);; font-size: .8em; border:1px solid  var(--main-color1);; width:7rem; height: 3rem; border-radius:5rem;}
#toggle_wrap .tg_list .title_box h3 > span {font-weight: bold; }
#toggle_wrap .tg_list .title_box i {position: relative; margin-left:auto;transform: translateY(0%) ; 	}
#toggle_wrap .tg_list .cont_box {display: none;padding: 2rem; background: var(--main-color2); border-radius:0 0 1rem 1rem ;}
#toggle_wrap .tg_list .title_box.on {background: var(--main-color1); border-radius:1rem 1rem 0 0;}
#toggle_wrap .tg_list .title_box.on h3 {color:#fff;}
#toggle_wrap .tg_list .title_box.on h3 > em {color:#fff; border-color:#fff;}
#toggle_wrap .tg_list .title_box.on i {transform: translateY(0%) rotate(180deg ); color:#fff;}



@media screen and (max-width: 768px) { 
	#toggle_wrap .tg_list .title_box {padding:2rem 8% 2rem 1rem; justify-content: flex-start;}
	#toggle_wrap .tg_list .title_box h3 {line-height: 1.3; font-size: 1em; text-align:left;}

}

</style>


<script>
    // 첫 번째 아코디언을 열고 on 클래스를 추가
    $(".tg_list .title_box").first().addClass("on").next(".tg_list .cont_box").show();

    $(".tg_list .title_box").click(function() {
    // 현재 클릭한 헤더에 on 클래스를 추가하고 나머지 헤더는 on 클래스를 제거
    $(this).addClass("on").next(".tg_list .cont_box").slideDown();
    $(".tg_list .title_box").not(this).removeClass("on").next(".tg_list .cont_box").slideUp();
    });
</script>