javascript 아코디언 메뉴

html

<div class="container">
        <h1>FAQ LIST</h1>
        <ul class="faq_item">
            <li class="faq_list">
                <div class="question">
                    <p class="question_text">question list 1</p>
                    <ion-icon name="chevron-down-outline" class="icon"></ion-icon>
                </div>
                <div class="answer">질문에 대한 답변1</div>
            </li>
            <li class="faq_list">
                <div class="question">
                    <p class="question_text">question list 2</p>
                    <ion-icon name="chevron-down-outline" class="icon"></ion-icon>
                </div>
                <div class="answer">질문에 대한 답변2</div>
            </li>
            <li class="faq_list">
                <div class="question">
                    <p class="question_text">question list 3</p>
                    <ion-icon name="chevron-down-outline" class="icon"></ion-icon>
                </div>
                <div class="answer">질문에 대한 답변3</div>
            </li>
            <li class="faq_list">
                <div class="question">
                    <p class="question_text">question list 4</p>
                    <ion-icon name="chevron-down-outline" class="icon"></ion-icon>
                </div>
                <div class="answer">질문에 대한 답변4</div>
            </li>
        </ul>
    </div>

js

const questions = document.querySelectorAll(".faq_list")

questions.forEach(function(question) {
    question.addEventListener("click", function() {
        questions.forEach(function(item) {
            if (item !== question) {
                item.classList.remove("active");
            }
        })
        question.classList.toggle("active");
    })
})

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

.container {
    width: 800px;
    margin: 200px auto;
}

h1 {
    text-align: center;
    font-size: 60px;
}

.faq_item {}

.faq_list {
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}

.question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.question_text {
    font-size: 24px;
}

.answer {
    font-weight: bold;
    color: orange;
    font-size: 18px;
    height: 0;
    overflow: hidden;
    transition: all 1s;
}

.faq_list.active .answer {
    height: 30px;
}

.faq_list .icon {
    transition: all 1s;
}

.faq_list.active .icon {
    transform: rotate(180deg);
}