jquery プラス、マイナスの切り替えで全部マイナスになっていく

Question

FAQのページをJQuery,アコーディオンを用いて
”一つ開けると他は閉じる”方式で、クリックしたらアコーディオンが開くと共に、プラスがマイナスになる、逆に別のをクリックしたらそこが閉じ、マイナスがプラスになる、というのをしたい、のですが、

現状、他のところをクリックし、今開いていたところが閉まったあと全部がマイナスになっていきます、、
（同じものをクリックしたらプラスマイナス切り替わリます、）

<div class="FAQ">
<dl>
     <div class="faqL">
        　<div class="faq_contents"><dt>質問 <i class="fas fa-plus"></i></dt>
        　<dd>答え</dd></div>
     </div><!-- /.faqL -->
     <div class="faqR">
        　<div class="faq_contents"><dt>質問<i class="fas fa-plus"></i></dt>
        　<dd>答え</dd></div>
     </div><!-- /.faqR -->
</dl>
</div><!-- /.FAQ -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

.FAQ dl{
    display: flex;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 50px;
    font-family: 'Montserrat', sans-serif;
}
.faq_contents{
    border: 1px solid #253b52;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 5px;
}
.FAQ dt{  
    font-size: 20px;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
}
.FAQ i{
    float: right;
    vertical-align: middle;
    line-height: 30px;
    color: #71A4D9;
}
.FAQ dd{
    font-size: 18px;
    margin: 0 20px 20px;
    text-align: justify;
}
.faqL{
    width: 50%;
    margin-right: 50px;
}
.faqR{
    width: 50%;
}

const dt=$('.FAQ dt');
        const dd=$('.FAQ dd');

        dd.hide();

        dt.on('click',function(){
        $(this).next().slideToggle();
        dd.not($(this).next()).slideUp();

        $(this).children("i").toggleClass('fas fa-plus fas fa-minus');
        dt.not($(this)).removeClass('fas fa-plus fas fa-minus');



    });

Comments

[ku__ra__ge]

> 現状、他のところをクリックし、今開いていたところが閉まったあと全部がマイナスになっていきます、、
提示されたコードでは、質問者さんの言う現状が再現できません。
問題が再現できるコードを提示してください。

[nony]

ありがとうございます！すみませんでした、修正しました。よろしくお願いします。

Answer 1

const dt=$('.FAQ dt');
const dd=$('.FAQ dd');

dd.hide();

dt.on('click',function(){
    $(this).next().slideToggle();
    dd.not($(this).next()).slideUp();
    
    $(this).children("i").toggleClass('fas fa-plus fas fa-minus');
    dt.not($(this)).children("i").removeClass('fas fa-plus fas fa-minus');
    dt.not($(this)).children("i").addClass('fas fa-plus');
});

Comments

[nony]

ありがとうございました！！！！！！！！できました！感謝です嬉しいですありがとうございました！