아코디언 코드에서 다른 영역 눌렀을때
본문
아코디언 코드에서 다른 영역 눌렀을때 원래 펼쳐져있던 내용이 접히는 것 까지는 되는데 화살표도 다시 원래대로 아래로 향했으면 좋겠습니다ㅜㅜ 이게 안되니 화살표도 엉망진창이네요 어떻게 하면 좋을까요..?
<html>
<div module="mall_faq">
<!--@css(/css/module/mall/faq.css)-->
<div class="titleArea">
<h1>이용안내</h1>
</div>
<div id="member" class="ec-base-tab grid7">
<div class="title">
<h1>회원가입 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$member_info}
</div>
</div>
<div id="order" class="ec-base-tab grid7">
<div class="title">
<h1>주문 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$order_info}
</div>
</div>
<div id="payment" class="ec-base-tab grid7">
<div class="title">
<h1>결제 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$payment_info}
</div>
</div>
<div id="delivery" class="ec-base-tab grid7">
<div class="title">
<h1>배송 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
<ul>
<li>배송 방법 : {$shipping_method}</li>
<li>배송 지역 : {$shipping_area}</li>
<li>배송 비용 : {$shipping_fee}</li>
<li>배송 기간 : {$shipping_period}</li>
<li>배송 안내 : {$shipping_agreement}</li>
</ul>
</div>
</div>
<div id="change" class="ec-base-tab grid7">
<div class="title">
<h1>교환/반품 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$product_change_info}
</div>
</div>
<div id="refund" class="ec-base-tab grid7">
<div class="title">
<h1>환불 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$refund_info}
</div>
</div>
<div id="etc" class="ec-base-tab grid7">
<div class="title">
<h1>기타 안내</h1>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="cont">
{$etc_info}
</div>
</div>
</div>
<js>
var $title = $('.xans-mall-faq .title');
var $content = $('.xans-mall-faq .cont')
$content.hide();
$title.click(function(){
$(this).children().toggleClass('active');
$content.not($(this).next($content).slideToggle()).slideUp();
});
답변 1
그부분을 클래스로 줘서 .attr('class', 'icon') 이런식으로 바꾸시던지 아니면 addClass와 removeClass로 활용하면되요
말씀해주신대로 해도 잘 안되서 그러는데 혹시 예시 코드 부탁드려도 될까요..?
$content.not($(this).next($content).slideToggle()).slideUp().removeClass('icon');
옆에다가 넣어보세요