1
2<div class="faq-container">
3  
4  <div class="faq-item">
5    <div class="faq-question" onclick="toggleFAQ(0)">
6      What is FAQ?
7      <span class="faq-icon">
8        ▼
9      </span>
10    </div>
11    <div class="faq-answer">
12      FAQ stands for Frequently Asked Questions. It's a list of common questions and answers about a specific topic.
13    </div>
14  </div>
15  
16  <div class="faq-item">
17    <div class="faq-question" onclick="toggleFAQ(1)">
18      Why use an FAQ section?
19      <span class="faq-icon">
20        ▼
21      </span>
22    </div>
23    <div class="faq-answer">
24      An FAQ section helps users quickly find answers to common questions, reducing the need for customer support and improving user experience.
25    </div>
26  </div>
27  
28</div>
29
30<script>
31function toggleFAQ(index) {
32  const faqItems = document.querySelectorAll('.faq-item');
33  const faqItem = faqItems[index];
34  const answer = faqItem.querySelector('.faq-answer');
35  const icon = faqItem.querySelector('.faq-icon');
36  
37  answer.classList.toggle('open');
38  icon.classList.toggle('open');
39}
40</script>
41

1
2.faq-container {
3  max-width: 800px;
4  margin: 0 auto;
5  font-size: 16px;
6}
7
8.faq-item {
9  background-color: #ffffff;
10  border: 1px solid #e5e7eb;
11  border-radius: 4px;
12  margin-bottom: 10px;
13  overflow: hidden;
14}
15
16.faq-question {
17  color: #333333;
18  padding: 15px;
19  cursor: pointer;
20  display: flex;
21  justify-content: space-between;
22  align-items: center;
23  transition: background-color 0.3s ease;
24}
25
26.faq-question:hover {
27  background-color: rgba(0, 0, 0, 0.05);
28}
29
30.faq-answer {
31  color: #666666;
32  padding: 0 15px;
33  max-height: 0;
34  overflow: hidden;
35  transition: max-height 0.3s ease, padding 0.3s ease;
36}
37
38.faq-answer.open {
39  max-height: 1000px;
40  padding: 15px;
41}
42
43.faq-icon {
44  color: #333333;
45  transition: transform 0.3s ease;
46}
47
48.faq-icon.open {
49  transform: rotate(180deg);
50}
51
52
53