Switching expand/collapse arrows on clicking different item-CodePudding

I am working on simple FAQ section, and I need a little bit help.

The problem is that when I switch between questions, the expand/collapse arrow will stay UP. Do you have any suggestions?

$(document).ready(function(){
    var nadpis = $('.nadpis');
    nadpis.on('click', function () {
        $(this).siblings().slideToggle()
        $(this).children().toggleClass("off on")
        nadpis.not(this).siblings().slideUp();
    });
});

.textbox:first-child p {
    display: none;
}

.nadpis {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 5em;
    border-bottom: 1px solid;
}

.off i:nth-child(2) {
    display: none;
}

.off i:first-child {
    display: block;
}

.on i:nth-child(2) {
    display: block;
}

.on i:first-child {
    display: none;
}

<link href="https://fonts.googleapis.com/css2?family=Kumbh Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>

    <section >
        <div >
            <div >
                <div >
                    <div >
                        <h2>How many team members can I invite?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
                    team members for the Premium plan.</p>
                </div>

                <div >
                    <div >
                        <h2>What is the maximum file upload size?</h2>
                    
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
                </div>

                <div >
                    <div >
                        <h2>How do I reset my password?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>Click “Forgot password” from the login page or “Change password” from your profile page.
                        A reset link will be emailed to you.</p>
                </div>

                <div >
                    <div >
                        <h2>Can I cancel my subscription?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>Yes! Send us a message and we’ll process your request no questions asked.</p>
                </div>

                <div >
                    <div >
                        <h2>Do you provide additional support?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
                </div>
            </div>
        </div>

    </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>

Here is full code pen

CodePudding user response：

Your toggleClass call only affects the content of the clicked item. Extend the scope of this effect: first select the container element, and then find all relevant "on" elements, and the "off" elements below the clicked item, and toggle those:

$(this).closest(".faq-text").find(".on")
       .add($(this).find(".off"))
       .toggleClass("off on")

Snippet:

$(document).ready(function(){
    var nadpis = $('.nadpis');
    nadpis.on('click', function () {
        $(this).siblings().slideToggle()
        $(this).closest(".faq-text").find(".on")
               .add($(this).find(".off"))
               .toggleClass("off on")
        nadpis.not(this).siblings().slideUp();
    });
});

.textbox p {
    display: none;
}

.nadpis {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 5em;
    border-bottom: 1px solid;
}

.off i:nth-child(2) {
    display: none;
}

.off i:first-child {
    display: block;
}

.on i:nth-child(2) {
    display: block;
}

.on i:first-child {
    display: none;
}

<link href="https://fonts.googleapis.com/css2?family=Kumbh Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>

    <section >
        <div >
            <div >
                <div >
                    <div >
                        <h2>How many team members can I invite?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
                    team members for the Premium plan.</p>
                </div>

                <div >
                    <div >
                        <h2>What is the maximum file upload size?</h2>
                    
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
                </div>

                <div >
                    <div >
                        <h2>How do I reset my password?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>Click “Forgot password” from the login page or “Change password” from your profile page.
                        A reset link will be emailed to you.</p>
                </div>

                <div >
                    <div >
                        <h2>Can I cancel my subscription?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p>Yes! Send us a message and we’ll process your request no questions asked.</p>
                </div>

                <div >
                    <div >
                        <h2>Do you provide additional support?</h2>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>
                    <p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
                </div>
            </div>
        </div>

    </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>

Unrelated remark

Make sure to hide all involved <p> elements when the pages loads. In the CSS replace this:

.textbox:first-child p {
    display: none;
}

...with just this:

.textbox p {
    display: none;
}