홈페이지에서 질문과 답변에 대한 내용을 찾아볼 수 있는 FAQ페이지를 쉽게 찾아 볼 수 있다.
이는 사용자와의 소통에서 중요한 요소로 작용할 수 있다.
<body>
<section class="questions">
<!-- title -->
<div class="title">
<h2>general questions</h2>
</div>
<!-- questions -->
<div class="section-center">
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you accept all major credit cards?</p>
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
dolore illo dolores quia nemo doloribus quaerat, magni numquam
repellat reprehenderit.
</p>
</div>
</article>
<!-- end of single question -->
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you suppport local farmers?</p>
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
dolore illo dolores quia nemo doloribus quaerat, magni numquam
repellat reprehenderit.
</p>
</div>
</article>
<!-- end of single question -->
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you use organic ingredients?</p>
<!-- button -->
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
dolore illo dolores quia nemo doloribus quaerat, magni numquam
repellat reprehenderit.
</p>
</div>
</article>
<!-- end of single question -->
</section>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>이 <body>에 해당하는 이 부분은 실질적인 질문과 답변의 UI를 보여주는 부분이다.
JS
1. 모든 질문 선택
const questions = document.querySelectorAll(".question");- .question클래스를 가진 모든 요소를 선택한다.
2. 각 질문 순회
questions.forEach(function (question) {
const btn = question.querySelector(".question-btn");
// console.log(btn);
btn.addEventListener("click", function () {
// console.log(question);
questions.forEach(function (item) {
if (item !== question) {
item.classList.remove("show-text");
}
});
question.classList.toggle("show-text");
});
});- forEach매서드는 questions노드 리스트의 각 요소를 순회한다.
- 각 질문에 대해서 question.querySelector(".question-btn")을 사용하여 내부의 버튼을 찾는다.
3. 이벤트 리스너 추가
btn.addEventListener("click", function () { ... });- 버튼에 'click' 이벤트를 추가한다.
4. 다른 질문 닫기
questions.forEach(function (item) {
if (item !== question) {
item.classList.remove("show-text");
}
});- 버튼이 클릭되면, 먼저 모든 질문을 다시 순회합니다
- 루프 내 현재 항목이 클릭된 질문이 아닌 경우, 해당 항목에서 .show-text클래스를 제거한다.
5. 클릭된 질문 전환
question.classList.toggle("show-text");- 마지막으로 스크립트는 클릭된 질문에 .show-text클래스를 전환하여 텍스트를 보이거나 숨긴다.
'개발 > javascript' 카테고리의 다른 글
| [JS] To do List 만들기 ! (0) | 2024.09.05 |
|---|---|
| [JS]날씨앱을 만들어 보자 (2) | 2024.09.04 |
| [JS]modal만들기 (0) | 2024.06.23 |
| [JS] 사이드 바 만들기 (1) | 2024.06.16 |
| [JS] 반응형 네비게이션바 (0) | 2024.06.09 |