javascript – How to toggle display style using vanilla JS on multiple elements

I would do this by using this CSS rule to show the answers rather than changing their style inline:

.expanded .answer {
    display: block;
}

…and then using event delegation on the .card element that contains the FAQ to catch clicks anywhere within it; if the click passed through a sectiondo this:

  • If the section has the expanded class, remove it to un-expand the answer.
  • If the section doesn’t have the expanded class, remove it from any other section that has it, then add it to the section that was clicked.

Here’s the JavaScript part:

const card = document.querySelector(".card");
card.addEventListener("click", (event) => {
    const section = event.target.closest("section");
    if (section) {
        if (section.classList.contains("expanded")) {
            // This is the expanded one, un-expand it
            section.classList.remove("expanded");
        } else {
            // This isn't the expanded one, un-expand the expanded
            // one (if any) and expand this one
            document.querySelector("section.expanded")?.classList.remove("expanded");
            section.classList.add("expanded");
        }
    }
});

Notice the optional chaining on the querySelector looking for an expanded section; it’s there in case there is no expanded section yet.

Live Example:

const card = document.querySelector(".card");
card.addEventListener("click", (event) => {
    const section = event.target.closest("section");
    if (section) {
        if (section.classList.contains("expanded")) {
            // This is the expanded one, un-expand it
            section.classList.remove("expanded");
        } else {
            // This isn't the expanded one, un-expand the expanded
            // one (if any) and expand this one
            document.querySelector("section.expanded")?.classList.remove("expanded");
            section.classList.add("expanded");
        }
    }
});
.card {
    width: 20.4375rem;
    background-color: #ffffff;
    border-radius: 1.4375rem;
    margin: auto;
    padding: 132px 24px 48px;
    text-align: center;
    transform: translateY(-125px);
}

section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8ea;
    flex-wrap: wrap;
}

p {
    color: var(--main-text-color);
    font-size: 0.75rem;
}

.answer {
    flex-basis: 100%;
    text-align: left;
    display: none;
}

.expanded .answer {
    display: block;
}
<div class="card">
    <h1 class="no">faq</h1>
    <section>
        <p class="question">How many team members can i invite?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            You can invite up to 2 additional users on the Free plan. There is no limit on team
            members for the Premium plan.
        </p>
    </section>
    <section>
        <p class="question">What is the maximum file upload size?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            No more than 2GB. All files in your account must fit your allotted storage space.
        </p>
    </section>
    <section>
        <p class="question">How do I reset my password?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Click “Forgot password” from the login page or “Change password” from your profile page.
            A reset link will be emailed to you.
        </p>
    </section>
    <section>
        <p class="question">Can I cancel my subscription?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Yes! Send us a message and we’ll process your request no questions asked.
        </p>
    </section>
    <section>
        <p class="question">Do you provide additional support?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Chat and email support is available 24/7. Phone lines are open during normal business
            hours.
        </p>
    </section>
</div>

It might be worth adding a class to the section and using that in the selectors, in case you have other parts of the page using sectionlike this:

const card = document.querySelector(".card");
card.addEventListener("click", (event) => {
    const section = event.target.closest(".faq");
    if (section) {
        if (section.classList.contains("expanded")) {
            // This is the expanded one, un-expand it
            section.classList.remove("expanded");
        } else {
            // This isn't the expanded one, un-expand the expanded
            // one (if any) and expand this one
            document.querySelector(".faq.expanded")?.classList.remove("expanded");
            section.classList.add("expanded");
        }
    }
});
.card {
    width: 20.4375rem;
    background-color: #ffffff;
    border-radius: 1.4375rem;
    margin: auto;
    padding: 132px 24px 48px;
    text-align: center;
    transform: translateY(-125px);
}

section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8ea;
    flex-wrap: wrap;
}

p {
    color: var(--main-text-color);
    font-size: 0.75rem;
}

.answer {
    flex-basis: 100%;
    text-align: left;
    display: none;
}

.expanded .answer {
    display: block;
}
<div class="card">
    <h1 class="no">faq</h1>
    <section class="faq">
        <p class="question">How many team members can i invite?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            You can invite up to 2 additional users on the Free plan. There is no limit on team
            members for the Premium plan.
        </p>
    </section>
    <section class="faq">
        <p class="question">What is the maximum file upload size?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            No more than 2GB. All files in your account must fit your allotted storage space.
        </p>
    </section>
    <section class="faq">
        <p class="question">How do I reset my password?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Click “Forgot password” from the login page or “Change password” from your profile page.
            A reset link will be emailed to you.
        </p>
    </section>
    <section class="faq">
        <p class="question">Can I cancel my subscription?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Yes! Send us a message and we’ll process your request no questions asked.
        </p>
    </section>
    <section class="faq">
        <p class="question">Do you provide additional support?</p>
        <img class="arrow" src="https://stackoverflow.com/questions/73002711/./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
            Chat and email support is available 24/7. Phone lines are open during normal business
            hours.
        </p>
    </section>
</div>

Leave a Comment