Submitted 10 months ago

FAQ-accordion

zaram•20

@blck-zed

Preview site View code

This is a solution for...FAQ accordion

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

please suggest how i the js code i can write so when i click on a detail, the next one closes

Community feedback

JessyTsiriniaina•20

@JessyTsiriniainaPosted 10 months ago

You can do it by masking all the detail the show the one where the onclick event is called

for (let index = 0; index < question.length; index++) {

question[index].addEventListener("click", function () {


    if (reponse[index].style.display == "none") {

        for (let i = 0; i < reponse.length; i++) {

            signe[i].src = "images/icon-plus.svg";
            reponse[i].style.display = "none";

        }
        reponse[index].style.display = "block";
        signe[index].src = "images/icon-minus.svg";
    }

    else {

        signe[index].src = "images/icon-plus.svg";
        reponse[index].style.display = "none";
    }
})

}

Variable: 'reponse' is the answer 'signe' represents the minus and plus sign

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord